title: How to validate form array with dynamic values using form builder
body: <p>Am working on angular project where I need to submit a form with some values where the exams</p>
  <p>form fields are dynamically created when I click the add button each row() will be added in the form.</p>
  <p>for adding each exam values. I could delete each row as well in the form.</p>
  <p>The requirement is I need to display a validation message for subject, mark and exams for each dynamic row created on click submit button if it is invalid/not selected. The exams field is a multiple checkbox list validate if nothing is selected</p>
  <pre><code>&lt;form [formGroup] = &quot;SettingsForm&quot; (ngSubmit) = &quot;SettingsFormSubmit()&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-xl-4&quot;&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;Name&quot; formControlName=&quot;Name&quot;&gt;
        &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-xl-4 &quot;&gt;
          &lt;p *ngIf=&quot;submitted &amp;&amp; SettingsForm.get('Name').invalid class=&quot;text-danger&quot;&gt;
            Name is required.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-xl-12&quot;&gt;
          &lt;table class=&quot;table&quot; formArrayName=&quot;PersonalData&quot;&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Subject&lt;/th&gt;
                &lt;th&gt;Mark&lt;/th&gt;
                &lt;th&gt;Exams&lt;/th&gt;
                &lt;th&gt;Delete&lt;/th&gt;
                &lt;th&gt;&lt;button type=&quot;button&quot;  (click)=&quot;addPersonalData()&quot; class=&quot;btn-blank&quot;&gt;Add&lt;/button&gt;&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr [hidden]=&quot;!data.value.active&quot;   *ngFor=&quot;let data of PersonalData().controls;let i=index&quot; [formGroupName]=&quot;i&quot;&gt;
                &lt;td&gt;
                  &lt;select class=&quot;form-control&quot; formControlName=&quot;subject&quot;  &gt;
                    &lt;option&gt;Select Subject&lt;/option&gt;
                    &lt;ng-container *ngFor=&quot;let subject of subjects&quot;&gt;
                    &lt;option  value=&quot;{{ subject.id }}&quot; &gt;{{ subject.subject_name }}&lt;/option&gt;
                    &lt;/ng-container&gt;
                  &lt;/select&gt;
                  &lt;ng-container *ngIf=&quot;data.get(subject).invalid&quot;&gt;
                    &lt;span class=&quot;&quot;&gt;error message&lt;/span&gt;
                  &lt;/ng-container&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;select class=&quot;form-control&quot; formControlName=&quot;mark&quot;&gt;   
                    &lt;option&gt;Select Mark&lt;/option&gt;
                    &lt;option&gt;50&lt;/option&gt;
                    &lt;option&gt;60&lt;/option&gt;
                    &lt;option&gt;90&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;ng-container *ngIf=&quot;data.get(mark).invalid&quot;&gt;
                    &lt;span class=&quot;&quot;&gt;error message&lt;/span&gt;
                  &lt;/ng-container&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;mat-form-field&gt;
                    &lt;mat-label&gt;Select Exams&lt;/mat-label&gt;
                    &lt;mat-select  #examsSelect multiple formControlName=&quot;exams&quot; &gt;
                      &lt;mat-option (click)=&quot;examsSelect()&quot; *ngFor=&quot;let term of terms&quot; [value]=&quot;term.id&quot;&gt;
                        {{term.name}}
                      &lt;/mat-option&gt;
                    &lt;/mat-select&gt;
                  &lt;/mat-form-field&gt;
                    &lt;ng-container *ngIf=&quot;data.get(exams).invalid&quot;&gt;
                    &lt;span class=&quot;&quot;&gt;error message&lt;/span&gt;
                  &lt;/ng-container&gt;
                &lt;/td&gt;
                &lt;td&gt;&lt;button type=&quot;button&quot;  (click)=&quot;deletedata(i)&quot; &gt;Delete&lt;/button&gt;
                &lt;/td&gt;
                &lt;td&gt;&lt;button type=&quot;button&quot;  (click)=&quot;addPersonalData()&quot; &gt;Add&lt;/button&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
     &lt;/form&gt; 
  
  
  
     this.SettingsForm = this.formBuilder.group({
      id: [''], 
      Name: ['',Validators.required],
      PersonalData: this.formBuilder.array([this.formBuilder.control('', Validators.required)])
     });
  
  
    PersonalData() : FormArray {
      return this.SettingsForm.get(&quot;PersonalData&quot;) as FormArray
    }
  
    newPersonalData(): FormGroup {
      return this.formBuilder.group({
        id: '',
        subject: '',
        mark: '',
       exams: '',
     })
    }
  
    addPersonalData() {
      this.PersonalData().push(this.newPersonalData());
    }
  </code></pre>
  <p>Iam saving each PersonalData to the formbuilder dynamically so at a time suppose if I have added 3 rows added then a group of 3 form fields will be their as formarray with same formcontrolname how to validate and show error messages for all the dynamically generated form fields? I got error when I do so..</p>
  <pre><code>`ERROR TypeError: Cannot read properties of null (reading 'invalid')`
  </code></pre>