title: ReactiveForm using NgFor
body: <p>I've been trying to figure this out for a while and I'm stuck. My approach seems inefficient and incorrect.</p>
  
  <p>What I am doing is, generating my form values using *ngFor, I am dynamically creating form controls for Answer's as well as questions.</p>
  
  <p>The issue is that, on Submit I need to have the answers associated with the questions, so I can pass to the next screen. The questions generated from the *ngFor are sorted by checkbox selected, if the selected = true; then bubble the question to the top.</p>
  
  <p>The issue is that on submit, pvqForm passed the formControls, I need to associate the answer with the question it was associated with. FormControls have a prefix {{i}} --> index, however, this index is after the sort. So Index 19 may not be question_id = '19'.</p>
  
  <p>The Object I am trying to achieve onSubmit is:</p>
  
  <pre><code>{
     question_id: "#",
     EN: "Question - #",
     FR: "Question - #",
     answer: "",
     isSelected: true
  }
  </code></pre>
  
  <p>I can save all the questions within an array, and simply use question_id to match the questions. However, how can I achieve the matching question_id along with the answer together?</p>
  
  <p>The object that begins the *ngFor is in the shape of...</p>
  
  <pre><code>{
    question_id: "1",
    EN: "Question 1 - EN",
    FR: "Question 1 - FR",
    isSelected: true
  },
  { 
    question_id: "2",
    EN: "Question 2 - EN",
    FR: "Question 2 - FR",
    isSelected: false
  }
  </code></pre>
  
  <p>My Component:</p>
  
  <pre><code>export class FpPVQ implements OnInit {
    private questions: any;
    private lang: string;
    private counter: number = 0;
    private checkedLimit: number = 5;
    private updateMode: boolean = false;
    private createMode: boolean = false;
    private deadlinePassed: boolean = false;
    private previousScreen: string = "";
    private flowA: boolean = false;
    private flowB: boolean = false;
    private flowC: boolean = false;
    private flowD: boolean = false;
    private pvqForm: FormGroup;
    private answer_0: FormControl;
    private answer_1: FormControl;
    private answer_2: FormControl;
    private answer_3: FormControl;
    private answer_4: FormControl;
    private answer_5: FormControl;
    private answer_6: FormControl;
    private answer_7: FormControl;
    private answer_8: FormControl;
    private answer_9: FormControl;
    private answer_10: FormControl;
    private answer_11: FormControl;
    private answer_12: FormControl;
    private answer_13: FormControl;
    private answer_14: FormControl;
    private answer_15: FormControl;
    private answer_16: FormControl;
    private answer_17: FormControl;
    private answer_18: FormControl;
    private answer_19: FormControl;
    private question_0: FormControl;
    private question_1: FormControl;
    private question_2: FormControl;
    private question_3: FormControl;
    private question_4: FormControl;
    private question_5: FormControl;
    private question_6: FormControl;
    private question_7: FormControl;
    private question_8: FormControl;
    private question_9: FormControl;
    private question_10: FormControl;
    private question_11: FormControl;
    private question_12: FormControl;
    private question_13: FormControl;
    private question_14: FormControl;
    private question_15: FormControl;
    private question_16: FormControl;
    private question_17: FormControl;
    private question_18: FormControl;
    private question_19: FormControl;
  
  
    private answerControlArr: Array&lt;FormControl&gt; = [];
    private questionsArr: Array&lt;any&gt; = [];
  
  
  
  @ViewChild(DirtyModalComponent) public readonly dirtyModal: DirtyModalComponent;
  
    constructor(private _pvqStepUp: PVQStepUpService, private _langToggle: ErrorToggleService, private router: Router) { }
  
    ngOnInit() {
      this.lang = window['appdata'].apiUserLanguage;
      console.log('fpPVQ:: pvqStepUpData --&gt; {}, ', this._pvqStepUp.data);
      if (this._pvqStepUp.data != null) {
        this.previousScreen = this._pvqStepUp.data.previousScreen;
        this.questions = this._pvqStepUp.data.pvqs;
        console.log('4176 FPVQ:: flow --&gt; {}', this._pvqStepUp.data.flow);
        switch(this._pvqStepUp.data.flow){
          case "A": this.flowA = true; break;
          case "B": this.flowB = true; break;
          case "C": this.flowC = true; break;
          case "D": this.flowD = true; break;
        }
        this.questions.forEach(object =&gt; {
          this.questionsArr.push([object.question_EN, object.question_FR, object.answer]);
          console.log(object.question_id, object.EN, object.FR);
        })
        if (this._pvqStepUp.data.deadlinePassed)
          this.deadlinePassed = true;
      }
  
  this.answer_0 = new FormControl('', Validators.required);
  this.answer_1 = new FormControl('', Validators.required);
  this.answer_2 = new FormControl('', Validators.required);
  this.answer_3 = new FormControl('', Validators.required);
  this.answer_4 = new FormControl('', Validators.required);
  this.answer_5 = new FormControl('', Validators.required);
  this.answer_6 = new FormControl('', Validators.required);
  this.answer_7 = new FormControl('', Validators.required);
  this.answer_8 = new FormControl('', Validators.required);
  this.answer_9 = new FormControl('', Validators.required);
  this.answer_10 = new FormControl('', Validators.required);
  this.answer_11 = new FormControl('', Validators.required);
  this.answer_12 = new FormControl('', Validators.required);
  this.answer_13 = new FormControl('', Validators.required);
  this.answer_14 = new FormControl('', Validators.required);
  this.answer_15 = new FormControl('', Validators.required);
  this.answer_16 = new FormControl('', Validators.required);
  this.answer_17 = new FormControl('', Validators.required);
  this.answer_18 = new FormControl('', Validators.required);
  this.answer_19 = new FormControl('', Validators.required);
  
  this.question_0 = new FormControl();
  this.question_1 = new FormControl();
  this.question_2 = new FormControl();
  this.question_3 = new FormControl();
  this.question_4 = new FormControl();
  this.question_5 = new FormControl();
  this.question_6 = new FormControl();
  this.question_7 = new FormControl();
  this.question_8 = new FormControl();
  this.question_9 = new FormControl();
  this.question_10 = new FormControl();
  this.question_11 = new FormControl();
  this.question_12 = new FormControl();
  this.question_13 = new FormControl();
  this.question_14 = new FormControl();
  this.question_15 = new FormControl();
  this.question_16 = new FormControl();
  this.question_17 = new FormControl();
  this.question_18 = new FormControl();
  this.question_19 = new FormControl();
  
  this.answerControlArr.push(this.answer_0);
  this.answerControlArr.push(this.answer_1);
  this.answerControlArr.push(this.answer_2);
  this.answerControlArr.push(this.answer_3);
  this.answerControlArr.push(this.answer_4);
  this.answerControlArr.push(this.answer_5);
  this.answerControlArr.push(this.answer_6);
  this.answerControlArr.push(this.answer_7);
  this.answerControlArr.push(this.answer_8);
  this.answerControlArr.push(this.answer_9);
  this.answerControlArr.push(this.answer_10);
  this.answerControlArr.push(this.answer_11);
  this.answerControlArr.push(this.answer_12);
  this.answerControlArr.push(this.answer_13);
  this.answerControlArr.push(this.answer_14);
  this.answerControlArr.push(this.answer_15);
  this.answerControlArr.push(this.answer_16);
  this.answerControlArr.push(this.answer_17);
  this.answerControlArr.push(this.answer_18);
  this.answerControlArr.push(this.answer_19);
  
  this.pvqForm = new FormGroup({
    answerControl0: this.answer_0,
    answerControl1: this.answer_1,
    answerControl2: this.answer_2,
    answerControl3: this.answer_3,
    answerControl4: this.answer_4,
    answerControl5: this.answer_5,
    answerControl6: this.answer_6,
    answerControl7: this.answer_7,
    answerControl8: this.answer_8,
    answerControl9: this.answer_9,
    answerControl10: this.answer_10,
    answerControl11: this.answer_11,
    answerControl12: this.answer_12,
    answerControl13: this.answer_13,
    answerControl14: this.answer_14,
    answerControl15: this.answer_15,
    answerControl16: this.answer_16,
    answerControl17: this.answer_17,
    answerControl18: this.answer_18,
    answerControl19: this.answer_19,
    questionControl0: this.question_0,
    questionControl1: this.question_1,
    questionControl2: this.question_2,
    questionControl3: this.question_3,
    questionControl4: this.question_4,
    questionControl5: this.question_5,
    questionControl6: this.question_6,
    questionControl7: this.question_7,
    questionControl8: this.question_8,
    questionControl9: this.question_9,
    questionControl10: this.question_10,
    questionControl11: this.question_11,
    questionControl12: this.question_12,
    questionControl13: this.question_13,
    questionControl14: this.question_14,
    questionControl15: this.question_15,
    questionControl16: this.question_16,
    questionControl17: this.question_17,
    questionControl18: this.question_18,
    questionControl19: this.question_19
  });
  
      //Determine if Update or Create
      if (this._pvqStepUp.data.flow !== 'A' &amp;&amp; this._pvqStepUp.data.flow != "B") {
        this.createMode = true;
        this.counter = 0;
      } else {
        this.updateMode = true;
        this.counter = 5;
      }
  
      this._langToggle.getLanguage().subscribe(
        lang =&gt; {
          this.lang = lang.toString();
        });
    }
  
  
    checkedState(event, checkBox) {
      if (event.target.checked === true) {
        if (this.counter &lt; this.checkedLimit) {
          this.counter++;
        } else {
          event.target.checked = false;
        }
      } else if (this.counter &gt; 0) {
        let index = event.target.name;
        //When clicking off the checkbox, set value to null
        this.answerControlArr[index].setValue(null);
        this.counter--;
      }
    }
  
    onSubmit(pvqForm: any) {
      console.log('4176-21 Submitted data --&gt; {}', pvqForm);
      // console.log(pvqForm._value);
      Object.keys(pvqForm._value).map((key) =&gt; {
        console.log('4176-21 Object Key: ', key, ' Object Value: ', pvqForm._value[key]);
        // console.log('Question Controm name ' + pvqForm._value[key]);
        if(key.startsWith('questionControl')){
        }
        if(key.startsWith('answerControl')){
          let index = key.replace('answerControl', '');
          console.log('Index is: ' + index);
          console.log('Value is: ', pvqForm._value[key]);
        }
      })
    }
  
    cancel() {
      this.dirtyModal.show();
    }
  
    modalStay() {
      this.dirtyModal.hide();
    }
  
    modalLeave() {
      //Navigate Away to the previous screen
      // this.router.navigate([this.previousScreen]);
      location.assign(this.previousScreen);
    }
  
    isDisabled() {
      if (this.counter == 5) {
        //Enable if 5 Checkboxes are selected
        return false;
      } else {
        //Disable if 5 Checkboxes are not selected
        return true;
      }
    }
  
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;form [formGroup]="pvqForm" (ngSubmit)="onSubmit(pvqForm)" novalidate&gt;
        &lt;div *ngFor="let question of questions | sortBy: 'selected'; let i = index" class="row container-generic"&gt;
          &lt;div class="col-md-8"&gt;
            &lt;div class="container-input-checkbox"&gt;
              &lt;label class="container-flex"&gt;
              &lt;input formControlName='questionControl{{i}}' #checkBox class="pvq-create-checkbox" type="checkbox" name="{{i}}" (change)="checkedState($event, checkBox)" [checked]="question.selected"&gt; 
              &lt;div class="pvq-create-label"&gt;
                &lt;div *ngIf="lang == 'en'"&gt;
                    &lt;p aria-label="English Question"&gt;{{ question.EN }}&lt;/p&gt;
                &lt;/div&gt;
                &lt;div *ngIf="lang == 'fr'"&gt;
                    &lt;p aria-label="French Question"&gt;{{ question.FR }}&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/label&gt;
              &lt;label [@hideShow]="checkBox.checked ? 'show' : 'hide'"&gt;Answer
              &lt;input minlength=4 formControlName='answerControl{{i}}' type="textbox" name="{{i}}"&gt;
               &lt;div *ngIf="!pvqForm.controls['answerControl' + i].valid &amp;&amp; pvqForm.controls['answerControl' + i].touched" style="color: red;"&gt;
                 Error here 
               &lt;/div&gt;
            &lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>