How to add multiple fields dynamically so that all these values are stored in an array in a reactive form using Angular 6? - ngfor

Question

I want to add multiple fields on the click of a button 'Add Answer' and all these values should be stored in an array.
So, each time on clicking this button 5 input fields should be generated and these values should be stored in an array as information about a single item.
I tried using formBuilder but it wasn't working then also tried a form group approach but couldn't implement it. I think it can be done using form group approach.
Content.component.ts:
export class ContentComponent implements OnInit {
questionForm: FormGroup;
aa = false;
ccc = true;
flag = 0;
constructor() { }
ngOnInit() {
this.questionForm = new FormGroup({
'course': new FormControl(null, Validators.required),
'topic': new FormControl(null),
'videos': new FormControl(null),
'quest': new FormControl(null, Validators.required),
'typee': new FormControl(null, Validators.required),
// name: new FormControl(),
// sName: new FormControl(),
'answerOptions': new FormArray([]),
'answerOptions2': new FormArray([]),
'answerOptions3': new FormArray([]),
'answerOptions4': new FormArray([]),
'answerOptions5': new FormArray([]),
'answerOptionsC': new FormArray([]),
'answerOptionsC2': new FormArray([]),
'answerOptionsC3': new FormArray([]),
'answerOptionsC4': new FormArray([]),
'answerOptionsC5': new FormArray([]),
'answerOptionsI': new FormArray([]),
});
this.questionForm.setValue({
'course': 'c1',
'topic': 't2',
'videos': 'v3',
'quest': '',
'typee': '',
'answerOptions': [],
'answerOptions2': [],
'answerOptions3': [],
'answerOptions4': [],
'answerOptions5': [],
'answerOptionsC': [],
'answerOptionsC2': [],
'answerOptionsC3': [],
'answerOptionsC4': [],
'answerOptionsC5': [],
'answerOptionsI': []
});}
onAddAns() {
if (this.flag === 1) {
const controlI = new FormControl(null, Validators.required);
(<FormArray>this.questionForm.get('answerOptionsI')).push(controlI);
} else if (this.flag === 2) {
// (<FormArray>this.questionForm.get('answerOptions')).push(
// new FormGroup({
// 'name': new FormControl(null),
// 'sName': new FormControl(null)
// })
// );
} else if (this.flag === 3) {
const controlC = new FormControl(null, Validators.required);
(<FormArray>this.questionForm.get('answerOptionsC')).push(controlC);
(<FormArray>this.questionForm.get('answerOptionsC2')).push(controlC);
(<FormArray>this.questionForm.get('answerOptionsC3')).push(controlC);
(<FormArray>this.questionForm.get('answerOptionsC4')).push(controlC);
(<FormArray>this.questionForm.get('answerOptionsC5')).push(controlC);
}}
dropChanged(val: any) {
this.questionForm.get('typee').disable();
console.log(val);
this.ccc = false;
if (val === 'text') {
this.flag = 1;
} else if (val === 'radio') {
this.flag = 2;
} else if (val === 'check') {
this.flag = 3;
} }
onSubmit() {
console.log(this.questionForm);}}
Content.component.html:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form [formGroup]="questionForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="type1">Select Course:</label>
<select
id="type1"
formControlName="course"
class="form-control">
<option value="c1">Data Handling</option>
<option value="c2">Data Processing</option>
<option value="c3">Data Manipulation</option>
</select>
</div>
<div class="form-group">
<label for="type2">Select Topic:</label>
<select
id="type2"
formControlName="topic"
class="form-control">
<option value="t1">Topic 1</option>
<option value="t2">Topic 2</option>
<option value="t3">Topic 3</option>
</select>
</div>
<div class="form-group">
<label for="type2">Select Video:</label>
<select
id="type2"
formControlName="videos"
class="form-control">
<option value="v1">Video 1</option>
<option value="v2">Video 2</option>
<option value="v3">Video 3</option>
</select>
</div>
<div class="form-group">
<label for= "questio">Question:
</label>
<input
type="text"
id= "questio"
formControlName="quest"
class="form-control">
<span
*ngIf="!questionForm.get('quest').valid && questionForm.get('quest').touched"
class="help-block">
<span *ngIf="questionForm.get('quest').errors['required']">This field is required!</span>
</span>
</div>
<div class="form-group">
<label for="type">Type of question</label>
<select
[disabled]="aa"
id="type"
formControlName="typee"
(change)="dropChanged($event.target.value)"
class="form-control">
<option value="text">Input type</option>
<option value="radio">Radio Button</option>
<option value="check">Checkbox</option>
</select>
</div>
<h4>Answers</h4>
<button
class="btn btn-default"
type="button"
(click)="onAddAns()">Add Answers</button>
<div class="form-group" id="ip1">
<!--*ngFor="let answerOptionControl of questionForm.get('answerOptions').controls; let i = index"-->
<!--formGroupName="i">-->
<!--Solution:<input type="text" class="form-control" [formControlName]='name'>-->
<!--Hint:<input type="text" class="form-control" [formControlName]="sName">-->
<hr>
</div>
<div class="form-group" id="ip2"
*ngFor="let answerOptionControlC of questionForm.get('answerOptionsC').controls; let a = index
let answerOptionControlC2 of questionForm.get('answerOptionsC2').controls; let b = index
let answerOptionControlC3 of questionForm.get('answerOptionsC3').controls; let c = index
let answerOptionControlC4 of questionForm.get('answerOptionsC4').controls; let d = index
let answerOptionControlC5 of questionForm.get('answerOptionsC4').controls; let e = index">
Solution:<input type="text" class="form-control" [formControlName]="a">
Hint:<input type="text" class="form-control" [formControlName]="b">
Status:<input type="text" class="form-control" [formControlName]="c">
link:<input type="text" class="form-control" [formControlName]="d">
Message:<input type="text" class="form-control" [formControlName]="e">
<hr>
</div>
<div class="form-group" id="ip3"
*ngFor="let answerOptionControlI of questionForm.get('answerOptionsI').controls; let f = index">
Keyword:<input type="text" class="form-control" formControlName="f">
<hr>
</div>
<hr>
<button class="btn btn-primary" type="submit" [disabled]="ccc" (click)="onSubmit()">Submit</button>
</form>
</div>
So, right now only for the option checkbox the application is working but some error is there of controls.
I know this approach is wrong that is why I want to do it using form-group.
This is the result of this code and the error along with it.

Answer 1

Your issue is that you forgot the [] around formControlName in the following code (I added it below):
<div class="form-group" id="ip3"
*ngFor="let answerOptionControlI of questionForm.get('answerOptionsI').controls; let f = index">
Keyword:<input type="text" class="form-control" [formControlName]="f">
<hr>
</div>
Therefore, instead of looking for the control at the index f, it is looking for a control named 'f', which does not exist.