Develop Reference

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

using template div id in an angular if statement

I have a modal with 3 lists that have unique ids:
<p class="accordion" ng-class"{active:accordion==2}" ng-click="accordion = 2">COPY from the PARCEL:</p>
<ul class="related_email_list accordion-content" ng-show="accordion==2">
<li ng-repeat="address in parcelAddressToStk">
<label for="selectAddress_parcel_{{address.AddressID}}">
<input type="checkbox" name="{{address.Alternate}}" class="parcelAddress" id="selectAddress_parcel_{{address.AddressID}}" value="{{address}}" ng-click="selectedAddresses(address);" ng-model="address.isSelected" ng-options="address.AddressID as address.pseudo for address in parcelAddressToStk" />
<span>
<b class="int-name">{{address.AddressType==='Mailing'?'Mailing Address:':(address.AddressType==='Street'?'Parcel Address:':(address.AddressType==='Mailing/Street'?'Mailing/Street Address:':'Home Quarter Address:'))}} </b>
<b>{{address.Alternate}}</b>
<b>{{address.StreetNumber?address.StreetNumber+" ":""}}{{address.StreetDirPre?address.StreetDirPre+" ":""}}{{address.StreetName?address.StreetName+" ":""}}{{address.StreetType?address.StreetType+" ":""}}{{address.StreetDirSuf?address.StreetDirSuf+" ":""}}{{address.UnitNumber!==""?"Unit " + address.UnitNumber:""}}</b>
<b>{{address.Municipality?address.Municipality+" ":""}}{{address.SubDivisionCode?address.SubDivisionCode+" ":""}}{{address.PCODE?address.PCODE+" ":""}}{{address.PostalZip?address.PostalZip+" ":""}}</b>
</span>
</label>
</li>
</ul>
I want to know if it's possible to use the selectAddress_parcel_{ID} in an if statement. I've tried
if ($scope["selectAddress_parcel_" + item.AddressID] == true) {
//do something
}
which comes back as undefined in the watch list. But if I hard-code selectAddress_parcel_56088 in watch I can see the correct object.
Is there an easier way to do this or am I concatenating my if statement incorrectly?

angular2 ngFor won't work

I'm trying to make some textboxes appear everytime a user clicks a button.
i'm doing this with ngFor.
For some reason, the ngFor won't iterate.
I've tried using slice to change the array reference, but still, the text boxes won't appear.
Any idea what i'm doing wrong??
Below are the HTML and component codes.
Thanks!!!
export class semesterComponent {
subjectsNames = [];
addSubject(subjectName: string) {
if (subjectName) {
this.subjectsNames.push(subjectName);
this.subjectsNames.slice();
console.log(subjectName);
console.log(this.subjectsNames);
}
};
<div class="semester-div">
<ul>
<li ngFor="let subject of subjectsNames">
<span>
<input #subjectName type="text" />
<input id = "subjectGrade" type = "number"/>
<input id = "subjectWeight" type = "number"/>
</span>
</li>
</ul>
<br>
<button (click)="addSubject(subjectName.value)">add</button>
<br>
</div>

You are missing the * in *ngFor
<li *ngFor="let subject of subjectsNames">

The way you have your controls written subjectName does not exist because the array is empty and therefore the *ngFor does not render it. Clicking the Add button results in a exception that the value doesn't exist on undefined where undefined is really subjectName.
Moving it outside of the *ngFor will make things work:
<input #subjectName type="text" />
<ul>
<li *ngFor="let subject of subjectsNames">
<span>
{{subject}}
<input id="subjectGrade" type="number"/>
<input id="subjectWeight" type="number"/>
</span>
</li>
</ul>
I suspect you also want to further bind the data as you iterate over the subject names but that's outside the scope of the question.
Here's a plunker: http://plnkr.co/edit/HVS0QkcLw6oaR4dVzt8p?p=preview

First, you are missing * in *ngFor.
Second put out
<input #subjectName type="text" />
from ngFor, should work.

How to add data and data flow in Ionic App using angular js

In AngularJS I want to create a birthday card list where I select my friends list from my JSON file and fill date of my selected friends.
I show my friends list in my index.html as
<!-- immutable scripts added -->
<script src="js/immutable.min.js"></script>
<ion-content class="has-subheader" >
<!-- card list declaration -->
<ul class="card">
<!-- checkBox Declaration and filtering by search box -->
<li class="item item-thumbnale-left" ng-repeat="item in items | filter:query">
<!-- show friends list in cards -->
<input type="text" ng-model ="friend.Name"
ng-init = "friend.Name = item.Name" readonly/>
<!-- take a input field for taking friend b'day date -->
<div class="item item-input-inset">
<!-- click a checkbox for add friend -->
<label class="checkbox">
<input type="checkbox" ng-click ="saveOrDelBirthday(friend)"
ng-show = "friend.Date" ng-model = "friend.check"/>
</label>
<label class="item-input-wrapper">
<input type="date" placeholder="Enter Date"
ng-model = "friend.Date" />
</label>
</div>
</li>
</ul>
</ion-content>
when i click a show button then a new list.html shows all selected friends list with their birthday but
My selected friend list is not showing the list in
list.html file as
<ion-content>
<ul class="card">
<li class="item" ng-repeat="(key,value) in information">
<div style="float: left">{{ key }}</div>
<div style="float: center">{{ value }}</div>
</li>
</ul>
<label class="item">
// this is for sending mail to me from my app
<button class="button button-positive" type="submit" ng-click = "sendMailMe()" >Confirm</button>
</label>
I use immutable data structure for storing data with key value pair in immutable.Map({});
I don't know where i'm wrong.
//my controller contain this method
$scope.information = {}; //storing data from map
var friendMap = Immutable.Map({}); //declaring Map for inserting data in key value pair
$scope.friendMap1;
//this section decide which operation perform
$scope.saveOrDelBirthday = function(friend){
console.log(friend.check);
if(friend.check){
friendMap1 = friendMap.set(friend.Name,friend.Date); //insert friend information
}
else{
friendMap1 = friendMap.delete(friend.Name); //delete friend information
}
information = friendMap1.toObject();
console.log(information);
};

It looks like $scope.information expected by the ng-repeat directive isn't being defined in your controller or is returning an empty list/object.

Angularjs how to escape some french letters

I am generating dynamic form based on angularjs and semantic-ui, the problem that anglers have a problem when parsing some French letter for example "français"
Lexer Error: Unexpected next character at columns 29-29 [ç] in expression [{'error' : (categoryForm.Français.$dirty && categoryForm.Français.$invalid)}].
the form was dynamically generated based on data loaded from server side :
<div class="two fields" data-ng-repeat="lang in category.languages">
<div class="field width_80"
data-ng-class="{'error' : (categoryForm.{{lang.languageName}}.$dirty && categoryForm.{{lang.languageName}}.$invalid)}">
<label data-ng-bind="lang.languageName"></label>
<div class="ui labeled icon left input">
<input type="text" name="{{lang.languageName}}" data-ng-model="lang.name" required
data-ng-minlength="3"/>
<i class="font icon"
data-ng-class="{'red' : (categoryForm.{{lang.languageName}}.$dirty && categoryForm.{{lang.languageName}}.$invalid)}"></i>
</div>
<div class="ui red pointing label transition"
data-ng-show="categoryForm.{{lang.languageName}}.$dirty && categoryForm.{{lang.languageName}}.$error.required">
{{'error.required' | i18n }}
</div>
<div class="ui red pointing label transition"
data-ng-show="categoryForm.{{lang.languageName}}.$dirty && categoryForm.{{lang.languageName}}.$error.minlength">
{{'error.minlength' | i18n }} 3 {{'error.digit' | i18n}}s
</div>
</div> ...
how could I escape some letter in dynamic generation

I have found the answer, first of all the problem of "Français" was resolve using brackets annotation categoryForm [Lang. languageName]. $invalid instead of categoryForm. {{Lang. languageName}}.$invalid thanks to Nikos Paraskevopoulos.
the second problem was the dynamic generation of input name that I have the answer she dynamic input name generatrion