title: Cannot read property 'touched' of undefined in angular6 reactive forms
body: <p>i have written code to validate page,but am getting error like ' Cannot read property 'touched' of undefined'.please any one help me this code.please any one correct if am wrong.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="container pt-4"&gt;
      &lt;form [formGroup]="goalForm" (submit)="submit()"&gt;
          &lt;div class="card"&gt;
              &lt;div class="card-header"&gt;Sub Goals&lt;/div&gt;
              &lt;div class="card-body" formArrayName="subgoals"&gt;
                  &lt;div *ngFor="let goal of goalForm.controls.subgoals.controls; let i=index"&gt;
                      &lt;div [formGroupName]="i" class="row"&gt;
                          &lt;div class="form-group col-sm-3"&gt;
                              &lt;label for="name"&gt;Criteria Name *&lt;/label&gt;
                              &lt;input class="form-control" formControlName="criteria_name" type="text" 
                                      id="criteria_name" name="criteria_name" 
                                      placeholder="Criteria Name"&gt;
                              &lt;span class="text-danger" *ngIf="goalForm.controls['criteria_name'].touched 
                                      &amp;&amp; goalForm.controls['criteria_name'].hasError('required')"&gt;
                                      Criteria Name is required! &lt;/span&gt;
                          &lt;/div&gt;                            
                          &lt;div class="form-group col-sm-3"&gt;
                              &lt;label for="weightage"&gt;Criteria Weightage *&lt;/label&gt;
                              &lt;input class="form-control" formControlName="criteria_weightage" type="number" 
                                      id="criteria_weightage" name="criteria_weightage" 
                                      placeholder="Criteria Weightage"&gt;
                              &lt;span class="text-danger" *ngIf="goalForm.controls['criteria_weightage'].touched 
                                      &amp;&amp; goalForm.controls['criteria_weightage'].hasError('required')"&gt;
                                      Criteria Weightage is required! &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;     
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>kpa-goal.component.ts:</p>
  
  <pre><code> ngOnInit(){
          this.goalForm = this.fb.group({
              subgoals :this.fb.array([
                this.initgoal(),
              ])
            });
      }
      initgoal(){
          return this.fb.group({
            criteria_name: [null,Validators.compose([Validators.required])],
            criteria_weightage: [null,Validators.compose([Validators.required])]
            });
      }
  </code></pre>