I want formControlName Like this,
- field_0
- field_1
- field_2
myObj = { "field_0":"value_0", "field_1":"value_1", "field_2":"value_2", } }
2 Answers
Here is an example of using a formArray:
<div formArrayName="addresses"
*ngFor="let address of addresses.controls; let i=index">
<div [formGroupName]="i">
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label"
attr.for="{{'street1Id' + i}}">Street Address 1</label>
<div class="col-md-8">
<input class="form-control"
id="{{'street1Id' + i}}"
type="text"
placeholder="Street address (required)"
formControlName="street1"
[ngClass]="{'is-invalid': (address.controls.street1.touched ||
address.controls.street1.dirty) &&
!address.controls.street1.valid }">
<span class="invalid-feedback">
<span *ngIf="address.controls.street1.errors?.required">
Please enter your street address.
</span>
</span>
</div>
</div>
</div>
</div>
The form array is defined as addresses in this example.
The ngFor processes each address in the array, using i as the index. I can then use the i in the id field to define a unique id.
Each form array element is a form group.
The form group includes each element for an address. (I am only showing one of those elements here.)
You can find the complete example here: https://github.com/DeborahK/Angular-ReactiveForms/tree/master/Demo-Final
4 Comments
Eliseo
why you use a formArray? Am I missing something?
DeborahK
I only showed a small fraction of the example (and linked to the full code). My particular example allows the user to enter multiple address fields. So it is a form array of addresses where each address is a form group containing the set of address fields. And I assumed by the example that it was the same field multiple times. But maybe I misunderstood the example?
Eliseo
::glups::, Perhaps I was who misunderstood the example -I only see an object, not an array of object, but the "}}" at the end of the object is not good for interpret the question
DeborahK
Good point regarding the
myObj. Now the OP has both options so they can do with them what makes sense for their app. :-)if you have some like
fields=["field_0","field_1","field_2"]
You first must create a FormGroup
createForm(fields: string[]) {
let group: any = {};
fields.forEach(x => {
group[x] = new FormControl();
})
return new FormGroup(group);
}
And, when you want show it
<form [formGroup]="form">
<div *ngFor="let field of fields">
<input [formControlName]="field">
</div>
</form>
{{form?.value|json}}
Well, we can replace fields by an array of objects with label","field","value" to create the form
See stackblitz
formArrayinstead