hi folks,
Here is my sample code:
*In Typescript:*
form: FormGroup;
itemArray:FormArray;
checkBoxList: any[] = [];
constructor(private formBuilder: FormBuilder) {}
ngOnInit(): void {
this.checkBoxList = [
{ name: 'One', value: 'One' },
{ name: 'Two', value: "Two" },
{ name: 'Three', value: "Three" },
{ name: 'Four', value: "Four" },
{ name: 'Five', value: "Five" },
];
this.form = this.formBuilder.group({
inputFormArray: this.formBuilder.array([this.createItem()]),
checkBoxArray: this.formBuilder.array(
this.checkBoxList.map(() => this.formBuilder.control(''))
)
});
this.itemArray = this.form.get('inputFormArray') as FormArray;
}
createItem(): FormGroup {
return this.formBuilder.group({
firstName: [null, Validators.required],
});
}
addItem(){
this.itemArray.push(this.createItem());
}
*In HTML:*
<div formArrayName="inputFormArray" >
<div *ngFor="let item of form.get('inputFormArray').controls; let i =
index;">
<div [formGroupName]="i" style="border: 1px solid #bdbdbd;
margin-bottom: 15px;">
input => {{i}}
<div formArrayName="checkBoxArray">
<div *ngFor="let unit of
form.controls.checkBoxArray.controls; let j = index;">
<div [formGroupName]="j">
Check box =>{{j}}
</div>
</div>
</div>
</div>
</div>
</div>
*ScreenShot:*
<https://lh3.googleusercontent.com/-x7K9SwZ_Lio/WqjKIv8OTlI/AAAAAAAANJI/DxsBC0b08BAlHrpxrGs8HCXLyiJ0EmNGgCLcBGAs/s1600/formarray.PNG>
It seems OK but I am getting error message and it says as below:
Cannot find control with path: 'inputFormArray -> 0 -> checkBoxArray -> 0'
Cannot find control with path: 'inputFormArray -> 0 -> checkBoxArray -> 1'
.
.
.
.
Cannot find control with path: 'inputFormArray -> 1 -> checkBoxArray -> 1'
Cannot find control with path: 'inputFormArray -> 1 -> checkBoxArray -> 4'
How to fix it? Any Idea?
I am waiting for your response
Thanks in Advance!
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
