I'm trying to build a nested reactive form but so struggling.
I checked this example and this example and put up codes like following, but always get error "Cannot find control with path: 'four_six_doc_multi_group -> document_txt_sub'"
Can anyone help me out? thank you very much!
My form:
let form = new FormGroup({
sevenzerozeroInfoForm : this.formBuilder.group({
pre_adv_ref : '',
lc_currency :'',
lc_amount :'',
issue_date : '',
four_six_doc_multi_group: this.formBuilder.array([this.create46DocMulti()])
})
},
{updateOn: 'blur'}
)
create46DocMulti(){
return this.formBuilder.group({
document_code: '',
document_txt_sub : this.formBuilder.array([this.formBuilder.control('')])
})}
My Html:
<div [formGroup]="sevenzerozeroInfoForm">
<div class="form-group" formArrayName="four_six_doc_multi_group">
<div *ngFor="let doc of four_six_doc_multi_group.controls; let i=index">
<div [formGroupName]="i">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">46A Documents Required (Code).{{i+1}}</label>
<input type="text" class="form-control" formControlName="document_code">
</div>
</div>
</div>
</div>
<div formArrayName="document_txt_sub" *ngFor="let document_txt of
getDocument_txt(i).controls; let j=index">
<div [formGroupName]="j" >
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">46A Documents Required.{{i+1}}.{{j+1}}</label>
<input type="text" class="form-control" formControlName="document_txt_sub">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>get four_six_doc_multi_group(){
return this.sevenzerozeroInfoForm.get('four_six_doc_multi_group') as FormArray;
}
getDocument_txt(index){
return ((<FormArray>this.sevenzerozeroInfoForm.get('four_six_doc_multi_group')).controls[index].get('document_txt_sub')) as FormArray;
}You should change this line as follows:
document_txt_sub : this.formBuilder.array([this.formbuilder.group({
document_txt_sub: ''
}])
because in your template you are declaring a [formGroupName]="j", but in your Form Array you only create a control, that's is the problem here. you should wrap the form control with a form group
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments