Reactive Form with Angular

Question

Hello and thanks you for your time. Thanks to @Steve:

How can I retrieve FormArray from the form in the nested loop ? where the first loop is: const questions = this.form.controls.questions as FormArray; and how can I present answers as const answers = this.form.controls.questins.answers as FormArray is not working?

HTML:

 <form [formGroup]="form" (ngSubmit)="onSubmit()">
   <div *ngFor="let data of (form.controls.questions as FormArray); let iindex = index">
     <div> {{ iindex + 1 }}.  {{ question.questTxt }}</div>

     <div *ngFor="let answer of questions; let iindex=index;"
           formArrayName="questions">
       <radio-button
                    [radioId]="answer.answerId"
                    [radioName]="question.id"
                    [radioOptionTxt]="answer.answer"
                    ></radio-button>
     </div>
   </div>
   <button class="btn btn-primary" type="submit">Submit</button>
 </form>




   myData() {
        return [
                { id: 100, name: 'It is Name 1', questTxt: 'I like animals and I have',
                     'answers': [{answerId: 10, answer: 'Dog'},
                     {answerId: 11, answer: 'Cat'},
                     {answerId: 12, answer: 'Rabbit'}]},
                { id: 200, name: 'It is Name 2', questTxt: 'I like drawing by',
                     'answers': [{answerId: 20, answer: 'Pencil'},
                     {answerId: 21, answer: 'Ink'},
                     {answerId: 22, answer: 'Oil'},
                     {answerId: 23, answer: 'Sangina'}]},
                { id: 300, name: 'It is Name 3', questTxt: 'The color of my dog is',
                     'answers': [{answerId: 30, answer: 'white'},
                     {answerId: 31, answer: 'black'},
                     {answerId: 32, answer: 'white and black'},
                     {answerId: 33, answer: 'orange'}]},
                { id: 400, name: 'It is Name 4', questTxt: 'This year I visited',
                     'answers': [{answerId: 40, answer: 'England'},
                     {answerId: 41, answer: 'Germany'},
                     {answerId: 42, answer: 'Canada'},
                     {answerId: 43, answer: 'Israel'}]},
              ];
   }
}

Answer 1

What you need is the FormArray option of Reactive Forms.

If your JSON passes back a list of objects that define a question and answer you can insert them into an ever growing FormArray inside your FormGroup controls.

this.formGroup = new FormBuilder.group({
    ...
    questions: this.formBuilder.array([])
})

Then when you have your data and are ready to populate the form:

var questions = this.formGroup.controls.questions as FormArray;

Now loop through the object returning as JSON and add each item to the questions array.

On the HTML side you can loop through the questions control:

*ngFor="let question of formGroup.controls.questions?.value"

That's a (very) brief example. I would suggest looking at more material online as FormArrays can be tricky to learn and mistakes are hard to locate.

EDIT: Looping through the data OK, assuming you have a JSON array with the questions in it, you would add them to the FormArray thusly:

var questions = this.formGroup.controls.questions as FormArray;
this.questionsJSON.forEach(question => {
    questions.push(question);
})

console.log(this.formGroup.controls.questions); // should see the question as values of the FormArray