I have been struggling to display the cat_name in a text box, but so far I haven't been successful. Here is my code snippet:
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
users: this.fb.array([])
})
let dataArr = new FormArray([]);
dataArr.push(new FormGroup({
'cat_name': new FormControl(this.users[0].data[0].cat_name),
'category': new FormControl(this.users[0].data[0].category)
}));
let formArr = <FormArray>this.myForm.controls.users;
formArr.push(fb.group({
firstname: this.users[0].firstname,
lastname: this.users[0].lastname,
street: this.users[0].street,
data: dataArr
}));
}<fieldset formGroupName="data">
cat_name:<input type="text" formControlName="cat_name">
</fieldset>The firstname and lastname successfully render in a text box, however, when it comes to the "data-sub array" which includes the cat_name, I have not been able to achieve the same results. Here is the URL to my code for reference: Code URL
I have even attached a screenshot showing that I am unable to render the cat_name field in the textbox Image. Below you can find the full HTML code:
<form [formGroup]="myForm" (ngSubmit)="onMy(myForm.value)">
<ng-container formArrayName="users">
<div *ngFor="let user of myForm.controls.users.controls; let i=index" [formGroupName]="i">
<select (change)="selectarch($event)">
<option>Select</option>
<option [value]="res.firstname" *ngFor="let res of users">{{res.firstname}}</option>
</select>
<br><br>
First name:<input type="text" formControlName="firstname">
<br>
Last name:<input type="text" formControlName="lastname">
<br>
Last name:<input type="text" formControlName="street">
<br><br>
<select (change)="selectcolumn($event)">
<option>Select</option>
<option [value]="col.cat_name" gFor="let col of test[0].data">{{col.cat_name}}</option>
</select>
<br><br>
<fieldset formGroupName="data">
cat_name:<input type="text" formControlName="cat_name">
</fieldset>
</div>
</ng-container>
<button type="submit">Add</button>
</form>