Как синхронизировать formControlName в ngFor внутри ngFor (вложенный formArray)?Я пытаюсь создать динамическую форму, столкнувшись с проблемой при получении обновленного массива форм.но я не могу получить доступ к значению в formControlName, пробовал приведенный ниже код, но он не работал.
Может кто-нибудь, пожалуйста, помогите мне, где я делаю неправильно в приведенном ниже коде
HTMLКод:
<form [formGroup]="ratioFormSrray" (ngSubmit)="saveRecord(ratioFormSrray.value)">
<div class="container" *ngFor="let col of ratios; let i = index;" [formGroupName]="i" >
<div><h3>{{col.name}}</h3></div>
<div *ngFor="let data of col.formulas" class="row" formGroupName="formulas">
<div class="col-lg-2">
<input type="checkbox" name="data.name" value="data.checked" formControlName="checked">
</div>
<div class="col-lg-4">
<p>{{data.name}}</p>
</div>
<div class="col-lg-2" formGroupName="operators">
<select formControlName="display">
<option *ngFor="let operator of data.operators;let j = index;" [formGroupName]="j" value="operator.value" >{{operator.display}}</option>
</select>
</div>
<div class="col-lg-4">
<input type="text" formControlName="benchMarkValue" name="{{data.benchMarkValue}}" value="{{data.benchMarkValue}}" >
</div>
</div>
</div>
<button class="btn btn-primary">
save
</button>
</form>
Код TS:
export class ratiosComponent implements OnInit {
ratioFormSrray: FormGroup;
formulas:string;
operators:string;
ratios= [
{
"name": "Leverage Ratios",
"id": 3,
"formulas": [
{
"name": "Debt to Equity",
"active": true,
"expression": "Total Debt / Total Equity",
"checked": false,
"operators": [
{
"display": "=",
"value": "=",
"active": true,
"selected": false
},
{
"display": ">",
"value": ">",
"active": true,
"selected": false
}
],
"benchMarkValue": 0
},
{
"name": "Debt to Assets",
"active": true,
"expression": "Total Debt / Total Assets",
"checked": false,
"operators": [
{
"display": "=",
"value": "=",
"active": true,
"selected": false
}
],
"benchMarkValue": 0
},
],
"checked": false
}
];
constructor( private formBuilder: FormBuilder) { }
ngOnInit(){
this.ratioFormSrray = this.formBuilder.group({
formulas: this.formBuilder.array([
this.formBuilder.group({
name:new formControl(),
active:new formControl(),
expression:new formControl(),
checked:new formControl(),
operators: this.formBuilder.array([
this.formBuilder.group({
display: new FormControl(),
value: new FormControl(),
active: new FormControl(),
selected: new FormControl()
})
]),
benchMarkValue:new formControl()
}),
checked:new formControl(),
])
});
}
saveRecord(model: any){
console.log("model",model)
}
}