Develop Reference

setting max length property of masked input control in ember js

input component in ember as below:
{{#each tags as |tag index|~}}
<li class="emberTagInput-tag">
{{yield tag}}
{{#if _isRemoveButtonVisible}}
<a class="emberTagInput-remove" {{action 'removeTag' index}}></a>
{{/if}}
</li>
{{~/each~}}
<li class="emberTagInput-new">
{{masked-input
disabled=readOnly
class=(concat 'emberTagInput-input js-ember-tag-input-new' (if readOnly ' is-disabled'))
maxlength='20'
textMaxLength='20'
placeholder=placeholder
input-format='regex'
input-filter='[A-Za-z0-9\ \-##]{1,20}'
input-filter-message='Complaint Id is not valid.'
}}
</li>
And I am using it in my hbs files as below:
<div class="col-md-2">
<div class="form-group">
<label for="due-date" class=" control-label">Complaint Id</label>
{{#tag-input
maxlength=20
tags=tags
addTag=(action 'addNewTag')
removeTagAtIndex=(action 'removeTagAtIndex')
as |tag|
}}
{{tag}}
{{/tag-input}}
</div>
</div>
I want to set max length for the input that I enter as text in the textbox that comes with this component, the maxlength that I am setting to 20 is not working, so the input field is allowing unlimited number of characters, any help please which property sets the max length that one can enter in it? Thanks a lot please.

Angular JS dynamically set tabindex attribute

I'm fairly new to Angular, and I'm working on a simple flashcard website. Here's my current relevant HTML:
<div id="flashcards" class="row">
<div class="flashcard col-sm-6 col-md-4 col-lg-3"
ng-repeat="card in cards">
<div class="flashcard-inside"
ng-class="{'flipped' : card.flipped}">
<div class="flashcard-btns">
<button ng-click="flip(card)" class="btn btn-secondary">
<i class="fas fa-sync-alt"></i>
</button>
<button ng-click="remove(card)" class="btn btn-danger">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="flashcard-front">
<textarea ng-model="card.front"
class="form-control
flashcard-content"
ng-tabindex="{-1 : card.flipped}">
</textarea>
</div>
<div class="flashcard-back">
<textarea ng-model="card.back"
class="form-control flashcard-content"
tabindex="card.flipped ? 0 : -1">
</textarea>
</div>
</div>
</div>
</div>
I'm making a flashcard for each card in cards.
My remove and flip functions are fairly simple:
$scope.flip = (card) =>
card.flipped = !card.flipped;
$scope.remove = (card)=>
$scope.cards = $scope.cards.filter(obj=> obj.front!=card.front || obj.back!=card.back);
As you can see above, I've tried ng-tabindex="{-1 : card.flipped}" and I've tried tabindex="card.flipped ? 0 : -1" and several other combinations with no luck. I was hoping someone more experienced in Angular could point me in the right direction. It seems my problems would be solved if I could get a hold of the DOM element from the card variable in my flip scrips, and set its tabindex attribute with jQuery, however I can't seem to access the element for the textarea (which would be nice because I'd also like to focus it later).

There is no need to use ng-attr-tabindex, it can simply be done with interpolation:
<div class="flashcard-front">
<textarea ng-model="card.front" class="form-control flashcard-content"
tabindex="{{card.flipped ? -1 : 0}}"></textarea>
</div>
<div class="flashcard-back">
<textarea ng-model="card.back" class="form-control flashcard-content"
tabindex="{{!card.flipped ? -1 : 0}}"></textarea>
</div>
The problem with the code in the question is that the interpolation needs double curly brackets ({{ }}).
The ng-attr-* syntax is only necessary in exotic situations.
For more information, see
AngularJS Developer Guide - Interpolation
AngularJS Developer Guide - ngAttr for binding to arbitrary attributes

Credit to #Phix for the suggestion to use ng-attr.
The relevant part is ng-attr-tabindex="{{card.flipped ? -1 : 0}}" and the same but with !card.flipped instead of card.flipped.
My full code is:
<div class="flashcard-front">
<textarea ng-model="card.front" class="form-control flashcard-content"
ng-attr-tabindex="{{card.flipped ? -1 : 0}}"></textarea>
</div>
<div class="flashcard-back">
<textarea ng-model="card.back" class="form-control flashcard-content"
ng-attr-tabindex="{{!card.flipped ? -1 : 0}}"></textarea>
</div>
Angular Docs

use ngFor loop in Angular 6 to dynamically create array of input elements and add dynamical validation based on template reference variables

I would like to create dynamically 3 input tags in Angular 6 to not copy/paste html code because that input elements have similar html and functionality.
For this purpose I created an array "reusableItems" inside component and initialize it :
let numberOfInputElements = 3;
for (let i = 0; i < numberOfInputElements; i++) {
this.reusableItems.push({
answer: 'Answer ' + (i +1),
passwordRecoveryAnswer: this.user['passwordRecoveryAnswer' + (i + 1)]
});
}
Then I put code inside my html :
<div *ngFor="let item of dropDownDataManagerService.reusableItems" >
<li class="col-xs-12 pl-lg pr0 pv-sm bd1-bottom">
<div class="col-xs-4 ph0 pt"> {{item.answerTitle}}</div>
<div class="col-xs-8">
<input type="text" name={{item.answer}} ref-{{item.answer}}="ngModel" class="col-sm-12 k-textbox ph0"
[(ngModel)]=item.passwordRecoveryAnswer
[pattern]="[a-z]"
required autocomplete="off"/>
</div>
</li>
</div>
It seems works fine but then I need to add error messages when these fields will be empty and not match to pattern. Something like :
<div *ngIf="__{{item.answer}}__.errors?.required ">
{{'Please provide an answer' | translate}}
</div>
<div *ngIf="__{{item.answer}}__.errors?.pattern">
{{'Pattern is not match'}}
</div>
I don't know what should i put inside ngIf condition.
How can I do it if my template reference variables are comes from array?
Is anyone have ideas?
Thanks

Angular creates unique template reference variable for each embedded template so that you can use the same template reference variable name inside ngFor loop:
<div *ngFor="let item of reusableItems">
<li class="col-xs-12 pl-lg pr0 pv-sm bd1-bottom">
<div class="col-xs-4 ph0 pt"> {{item.answerTitle}}</div>
<div class="col-xs-8">
<input type="text" name={{item.answer}} ref-answer="ngModel" class="col-sm-12 k-textbox ph0" [(ngModel)]="item.passwordRecoveryAnswer"
[pattern]="'[a-z]'" required autocomplete="off" />
<div *ngIf="answer.errors?.required">
{{'Please provide an answer'}}
</div>
<div *ngIf="answer.errors?.pattern">
{{'Pattern is not match'}}
</div>
</div>
</li>
</div>
In the code above I use the same name for each input in array
ref-answer="ngModel" // or you can also use #answer="ngModel

Angular 2 NgFor Pattern Error Message Not Showing

I'm trying to have inputs with a regex requirement in a ngFor loop but am not seeing the error message as expected when I put something that doesn't match the required pattern.
"Test" is never hidden and <div *ngIf="id?.hasError('pattern')"> never shows, even when I enter the wrong pattern. I can see that the input fails because I'm using Material Design and the color of the line underlining the input changes to red but I do not see any changes in regards to the error messages.
Here is my code at the moment:
(The keys pipe I have is a custom pipe because item is an object made of objects, so that breaks down the contained objects into key/value pairs.)
<div *ngFor="let item of items | keys">
<md-input-container>
<input
mdInput
placeholder={{item.placeholder}}
name={{item.name}}
pattern="\d{7}"
[(ngModel)]="item.currentValue"
#id="ngModel"
>
</md-input-container>
<div
[hidden]="id?.valid || id?.pristine"
>
<p>Test</p>
<div *ngIf="id?.hasError('pattern')">
Pattern should be xxxxxxx
</div>
</div>
</div>

Try by changing name={{item.name}} to name="id".

Try it in next way:
<div *ngFor="let item of items | keys">
<md-input-container>
<input
mdInput
placeholder={{item.placeholder}}
name={{item.name}}
pattern="\d{7}"
[(ngModel)]="item.currentValue"
#id="ngModel"
>
</md-input-container>
<div [hidden]="!displayValid(id)">
<p>Test</p>
Pattern should be xxxxxxx
</div>
</div>
And this fun in .ts file of component:
displayValid(inputRef: any): boolean {
let errors: any = inputRef.errors;
return errors && errors.pattern;
}

uib-popover-template not showing

I am trying to use a uib-popover-template on a font awesome icon as a sort of settings menu but can't get the popup to show. This is in the header of the page I am using:
<h3>{{vm.title}}
<i class="fa fa-ellipsis-v pull-right"
aria-hidden="true"
uib-popover-template="'options-panel.html'"
popover-placement="left"></i>
</h3>
And i have the ellipses in the right corner kind of like a 'more options' menu. options-panel.html is just 4-5 <select> dropdowns depending on the page that looks like this:
<div class="row">
<div class="form-group col-md-12">
<label for="viwemode">View Mode</label>
<select id="viewmode"
class="form-control"
ng-model="vm.currentViewer"
ng-options="view for view in vm.views"
ng-change="vm.viewChange();"></select>
</div>
<div class="form-group col-md-12"
ng-repeat="viewOption in vm.genericOptions">
<label for="{{viewOption.label}}">{{viewOption.label}}</label>
<select id="{{viewOption.label}}"
class="form-control"
ng-model="vm.config[viewOption.label]"
ng-options="v as k for (k,v) in viewOption.values"
ng-change="vm.optionChange(viewOption.label);"></select>
</div>
<div class="form-group col-md-12"
ng-repeat="viewOption in vm.viewerOptions">
<label for="{{viewOption.label}}">{{viewOption.label}}</label>
<select id="{{viewOption.label}}"
class="form-control"
ng-model="vm.config[viewOption.label]"
ng-options="value for value in viewOption.values"
ng-change="vm.optionChange(viewOption.label);"></select>
</div>
</div>
And lastly in the controller for the class I just have this object which has the template url in it:
vm.popover = {
template: '<a href uib-popover-template="\'options-panel.html\'" popover-placement="left"></a>'
};
I am not sure what I am missing but not even a popover will show let alone the one with my template in it. If I just do the ellipses (fa-icon) with uib-popover="test" the popover will show with 'test' in it so I do have the uib dependency correctly installed.

Consider this uib-popover-template plunker
I don't know your data structure but should work.
You don't need anymore
vm.popover = {
template: '<a href uib-popover-template="\'options-panel.html\'" popover-placement="left"></a>'
};

This line
uib-popover-template="'options-panel.html'"
Should be
uib-popover-template="options-panel.html"
Notice I removed the single quotes, uib-popover-template accepts an expression that will evaluate to the template location on your $scope. by passing your template path in single quotes you are only passing a plain string as an expression.
From the Docs
uib-popover-template - A URL representing the location of a template to use for the popover body