Once I set up a FormBuilder during the onInit Lifecyle:
surveyForm: FormGroup;
ngOnInit(): void {
this.surveyForm = this.formBuilder.group({
'surveyTitle': new FormControl(null),
'surveyDescription': new FormControl(null),
'questionsDetail': this.formBuilder.array([
this.formBuilder.group({
'questionType': new FormControl('mcq'),
'question': new FormControl(null),
'choices': this.formBuilder.array([])
})
])
});
};
I am struggling to find out how to access the controls of my FormArray
<form [formGroup]="surveyForm">
<input formControlName = "surveyTitle">
<textarea formControlName = "surveyQuestion"></textArea><div formArrayName='questionsDetail'>
<div [FormArrayName]="questionsDetail">
<div *ngFor="let questionDetail of surveyForm.get('questionsDetail').controls; let i=index">
<div [FormGroup]="i">
...
<div [FormArrayName]="choices">
<div *ngFor="let choice of surveyForm.get('questionsDetail').controls.get('choices').controls; let in=index">
<div [FormGroup]="in">
...
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Can someone demonstrate the correct syntax for accessing data inside a FormGroup that is nested within a FormArray? I am having trouble with the ngFor syntax when working with formBuilder.
Your assistance would be greatly appreciated.
Thank you in advance.