I am currently facing an issue with my code. In my FormGroup, I have a FormArray containing 3 FormControls. My goal is to iterate through the FormArray and display the values of each control in a form. However, I am unsure about what to use for the formControlName.
This is my FormGroup:
fg: FormGroup = new FormGroup({
properties: new FormArray([])
});
When adding the FormControls to my FormArray using data from dataArray, this is how it's done:
let formArray = this.fg.get('properties') as FormArray;
for(let property of dataArray){
const userPropertyGroup = new FormGroup({
user_id: new FormControl("", Validators.required),
name: new FormControl("", Validators.required),
value: new FormControl("", Validators.required),
});
formArray.push(userPropertyGroup);
To set the values in the FormArray:
for(let i = 0; i < dataArray.length; i++ ){
formArray.controls[i].setValue({
user_id: dataArray[i].user_id,
name: dataArray[i].name,
value: dataArray[i].value,
})
}
Now, I aim to iterate through and display all the values in the form. While {{property.value.name}} successfully fetches the values of each property in the array, I am uncertain about the formControlName field. What should be placed there?
<form [formGroup]="fg" >
<table *ngFor="let property of fg.get('properties')['controls']" class="full-width">
{{property.value.name}}
<tr>
<td>
<mat-form-field class="full-width">
<input matInput formControlName="?????" placeholder="User id">
</mat-form-field>
</td>
Despite consulting various similar questions on StackOverflow and trying out the example provided in the Angular docs, I have yet to find a solution. Any assistance would be greatly appreciated. Thank you!