title: ERROR TypeError: Cannot read property 'errors' of undefined in angular 5
body: <p>I have used formArray and now Iam doing validation on the array fields. Below is my code but when I click on Submit, I am getting </p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'errors' of undefined.</p>
  </blockquote>
  
  <p>and the first line of html is highlighted in red on console. Please let me know the actual cause.</p>
  
  <p><code>app.component.html</code></p>
  
  <pre><code>  &lt;div *ngFor="let items of contractList.controls; let i=index" 
                  [formGroupName]="i"&gt;
      &lt;table&gt;
      &lt;thead&gt;&lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt; 
       &lt;td&gt;
          &lt;div class="form-group col-xs-6"&gt;
            &lt;label for="copay"&gt;Copay Amount:&lt;/label&gt;
            &lt;input formControlName="copay" placeholder="Copay Amount" class="form-control" name="copay" id="copay" [ngClass]="{ 'is-invalid': submitted &amp;&amp; items.get('copay').errors }"&gt;
          &lt;div *ngIf="submitted &amp;&amp; items.get('copay').errors" class="invalid-feedback"&gt;
                                  &lt;div *ngIf="items.get('copay').errors.required"&gt;Copay is required&lt;/div&gt;
                              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p><code>app.component.ts</code></p>
  
  <pre><code> get contractList() {
           return this.addForm.get('contractServiceList') as FormArray;
        }
        constructor(public formBuilder: FormBuilder, public router:
          Router, public activatedRoute: ActivatedRoute, public contractService: ContractService) {
        }
      get f() { return this.addForm.controls; }
  
         arrayValidator() {
          return (control: FormArray) =&gt; {
            return null;
           }
        }
        createForm(data: any): FormGroup {
          return this.formBuilder.group({
            contractName: [data ? data.contractName : '', Validators.required],
            contractServiceList: this.formBuilder.array(
                   this.createContractService(data ? data.contractServiceList : null),this.arrayValidator()
                    )
            });
        }
        createContractService(data: any[]|null): FormGroup[] {
          return data ?
            data.map(x =&gt; {
              let group = this.formBuilder.group({
                serviceId: [x.serviceId, Validators.required],
                copay: [x.copay, Validators.required],
                coinsurance: [x.coinsurance, Validators.required],
                deductibleApplies: [x.deductibleApplies, Validators.required],
                penaltyApplies: [x.penaltyApplies, Validators.required],
                penaltyRule: [x.penaltyRule, Validators.required],
                penaltyType: [x.penaltyType, Validators.required],
                penaltyValue: [x.penaltyValue, Validators.required],
                deductibleAppliesPenalty: [x.deductibleAppliesPenalty, Validators.required]
                  });
              return group;
            }) :
            [this.formBuilder.group(
              {
                serviceId: ['', Validators.required],
                copay: ['', Validators.required],
                coinsurance: ['', Validators.required],
                deductibleApplies: ['', Validators.required],
                penaltyApplies: ['', Validators.required],
                penaltyRule: ['', Validators.required],
                penaltyType: ['', Validators.required],
                penaltyValue: ['', Validators.required],
                deductibleAppliesPenalty: ['', Validators.required]
              })];
        }
        ngOnInit() {
           {
          this.addForm = this.createForm(null);
        }
        }
  
        onSubmit() {
          this.submitted = true;
          console.log(this.addForm.value);
          if (this.addForm.invalid) {
                  return;
              }
          this.contractService.saveContract(this.addForm.value)
            .subscribe( data =&gt; {
              if ( window.confirm('Contract created successfully') ) {
                this.addForm.reset();
              }
  </code></pre>