here is the image If click on Add symbol each row will be added so index should increment automatically
Please someone explain me?
<div class="form-row">
<div
class="form-row"
*ngFor="let temp of logger.temperature; let i = index"
>
<div class="form-group col-md-2">
<input
name="tempindex+{{ i }}"
[(ngModel)]="temp.index"
type="number"
class="form-control"
placeholder="Index"
required
/>
</div>
If click on Add symbol each row will be added so index should increment automatically
Please someone explain me?
When you dynamically add rows, its better you to use reactive form. YOu just need to add
<tbody formArrayName="gaugeTitles"
*ngFor="let item of gaugeTitleForm.get('gaugeTitles').controls; let i = index;">
<tr [formGroupName]="i">
<td><input type="text" [value]="i+1"></td>
<td><input type="text" formControlName="name"></td>
<!-- Other fields -->
</tr>
</tbody>
Working Stackblitz
Related
I'm trying to do an reactive form but I have some problem with the visual part ^^
Here is my html :
<form class="text-center" [formGroup]="requeteModif" (ngSubmit)="modifier()" *ngIf="tableSelect != null">
<h5>Ajouter des informations</h5>
<div class="row">
<div class="col" *ngFor="let modification of modif.controls; let nomCol of nomColonne; let j=index" formArrayName="modif">
<label class="text-center">
{{nomCol}}
</label>
<div *ngFor="let infoTable of infoTable; let i = index;">
<input type="text" class="form-control" [formControlName]="i">
</div>
<div><button class="btn btn-primary" type="submit">Modifier</button></div>
</div>
</div>
</form>
What I want :
Col1 Col2
true A Button (get true, A)
false B Button
[EDIT]
I have find a way to display it the way I want but I don't know how to arrange my code since I'm suppose to use variable..
<div *ngFor="let infoTable of infoTable; let i = index;">
<input *ngIf="j==0" type="text" class="form-control" [formControlName]="i">
<input *ngIf="j==1" type="text" class="form-control" [formControlName]="i+5">
</div>
j id the number of the columns, as you can see it's depend on the number of columns, using this way it's too static but I have no idea about how to fix it...
Sorry for my english
Thank you !
I have find the answer, I just have use the data_binding but I didn't knew how it works ^^' [ngModel]
I am using Template Driven for my Angula'rs form and I have a div that repeats several times (according to a counter variable).
The thing is , I need the required validation only for the first item in this list and I 'm not sure how to do that.
<div class="form-group required margin-left" *ngFor="let hore of horim;let i = index">
<label class="control-label translate-label" [id]="'lblShemPratiHore'+i">{{selectedLanguage.shemPrati}}</label>
<!-- <img src="../../../assets/images/parent.png" alt="shem prati"> -->
<input
[id]="'shemPratiHore'+i"
[(ngModel)]="hore.shemPrati"
class="form-control input-lg"
[name]="'shemPratiHore'+i"
[attr.aria-describedby]="'lblShemPratiHore'+i"
#shemPrati="ngModel"
required
[ngModelOptions]="{ updateOn: 'blur' }"/>/>
<div *ngIf="shemPrati.errors?.required && shemPrati.touched" class="alert alert-danger">
Required Field
</div>
</div>
try binding to the required attribute if index is equal 0.
[required]="index == 0"
The anwer for this post is as follow:
[required]="i==0"
I have an array like below
standardInput:any = [{val:'1'},{val:'2'},{val:'3'}];
When i loop it in my view
<div class="form-group row text-right" *ngFor='let row of standardInput' >{{row.val}}
<label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label>
<div class="col-sm-9 form-control-label m-t-5" for="password-h-f">
<div class="row">
<div class="col-sm-9" >
<input class="form-control" name="roles" [formControl]="form.controls['service_standard_sub_heading']" [(ngModel)]="row.val" id="email-h-t" type="email">
</div>
<div class="col-sm-3">
<button class="btn btn-danger" (click)="removeInputs('standard',i)">Remove</button>
</div>
</div>
</div>
</div>
The output is :3 3 3,it is showing only the last object in the array for the 3 iterations.I am not able to understand what's the reason.Can anyone please suggest help.Thanks.
I believe you are using template-driven form, if not, let me know and we can look at a solution for model-driven form :)
In forms, the name attribute needs to be unique. Even though the ngModel is unique, Angular doesn't really care about it, but looks at the name attribute instead. Since you are using a template-driven form and ngModel, I see no need to use formControl here, you can just rely on the the ngModel and name attribute instead. So, to get the unique name attribute, we can bind the row.val to it, like so:
[name]="row.val"
So your complete template would look like this:
<form #form="ngForm">
<div class="form-group row text-right" *ngFor='let row of standardInput'>
<input class="form-control" [name]="row.val" [(ngModel)]="row.val">
</div>
</form>
I have an angular 2 application, where i use a ngFor to handle an bunch of checkboxes. when i initialize this component i need to set the state of the checkbox based on weather an id excists in an array
<div *ngFor="let option of listOptionResponse.options" class="col-md-12">
<div class="col-lg-12">
{{option.headline}}
</div>
<div class="col-lg-2 col-md-2 ">
<input type="checkbox" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose">
</div>
</div>
In the component i have an array and if the options.id exists in this array i wanna set it to true.
I cannot think of a good way to do this, and i have been looking for some sort of init event to use, bu without luck.
(this has nothing to do whith the excisting (change) event)
I hope you can help, and thanks in advance
You can just bind to checked like
<input type="checkbox" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose"
[checked]="ids.indexOf(option.id) != -1">
Perhaps you could try this:
<input type="checkbox" [(ngModel)]="option.id" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose">
I have table rows which I need to generate based on template. There should be some variables. For example persons[0].lastName should be persons[1].lastName for next row and so on. I want to store template in html file. I use angular-ui/ui-router. How to make this work?
Example:
<tr>
<td>
<div class="form-group first-name">
<label>First name</label>
<input type="text" ng-class="{'input-valid': isValidField('FirstName', persons[0].firstName)}" name="firstName" class="form-control input-name" ng-model="persons[0].firstName" ng-focus="focused('inputFirstName', 0)" placeholder="-">
</div>
</td>
<td>
<div class="form-group last-name">
<label>Last name</label>
<input type="text" ng-class="{'input-valid': isValidField('LastName', persons[0].lastName)}" name="lastName" class="form-control input-name" ng-model="persons[0].lastName" ng-focus="focused('inputLastName', 0)" placeholder="-">
</div>
</td>
</tr>
UPDATE
I find that ui router supports resolution of dependent objects and it's injection into controller. I successfully got html at string using resolve and $http inside of it. Now I need to replace 1 to relevant digit for each iteration. What is the best practice to do it?
UPDATE 2
I am not sure if ngRepeat is relevant here because I don't have list of objects to iterate. For example in imperative languages ngRepeat would equal foreach but I need just for loop where I can specify number of elements i need
UPDATE 3
I added all rows to array tableRowsHTML. Now I have troubles to render it in view as raw HTML. This simply does not work:
<table>
<tr> static stuff here </tr>
<tr ng-repeat="el in tableRowsHTML track by $index">
{{el}}
</tr>
</table>
How to fix it?
Use something like this
<tr>
<td>
<div class="form-group first-name" ng-repeat="name in firstNames track by $index">
<label>First name</label>
<input type="text" ng-class="{'input-valid': isValidField('FirstName', persons[$index].firstName)}"
name="firstName" class="form-control input-name" ng-model="persons[$index].firstName"
ng-focus="focused('inputFirstName', 0)" placeholder="-">
</div>
</td>
<td>
<div class="form-group last-name" ng-repeat="name in lastNames track by $index">
<label>Last name</label>
<input type="text" ng-class="{'input-valid': isValidField('LastName', persons[$index].lastName)}"
name="lastName" class="form-control input-name" ng-model="persons[$index].lastName"
ng-focus="focused('inputLastName', 0)" placeholder="-">
</div>
</td>
here firstNames, and lastNames are the list of names.