title: Getting 'TypeError: Cannot read property 'errors' of undefined' in my Angular Form
body: <p>I want to have a Reactive form for creating clients, however, I get this error in the console when I serve my app:</p>
  
  <pre><code>TypeError: Cannot read property 'errors' of undefined
  </code></pre>
  
  <p>It is pointing to the first<code>&lt;li&gt;</code> element of this block:</p>
  
  <pre><code>  &lt;ul class="help-block"&gt;
        &lt;li *ngIf="form.controls.email.errors?.required &amp;&amp; form.controls.email.dirty"&gt;Required&lt;/li&gt;
        &lt;li *ngIf="(form.controls.email.errors?.minlength || form.controls.email.errors?.maxlength) &amp;&amp; form.controls.email.dirty"&gt;Minimum chars: 5, maximum 35&lt;/li&gt;
  
      &lt;/ul&gt;
  </code></pre>
  
  <p>full form code:</p>
  
  <pre><code>    &lt;form style="border:1px solid" [formGroup]="form" 
      (submit)="onRelatieSubmit()"&gt;
      &lt;h4&gt; New client &lt;/h4&gt;
      &lt;div class="form-group"&gt;
  
        &lt;label for="company"&gt;Company&lt;/label&gt;
        &lt;div class="col-5"&gt;
          &lt;input  [ngClass]="{'is-invalid': (form.controls.company.errors &amp;&amp; 
      form.controls.company.dirty),
          'is-valid': !form.controls.company.errors}" class="form-control" type="text" name="company" (autocomplete)="off" placeholder="Name" formControlName="company" (blur)="checkUsername()"/&gt;
          &lt;ul class="help-block"&gt;
            &lt;li *ngIf="form.controls.company.errors?.required &amp;&amp; form.controls.company.dirty"&gt;Required&lt;/li&gt;
            &lt;li *ngIf="(form.controls.company.errors?.minlength || form.controls.company.errors?.maxlength) &amp;&amp; form.controls.company.dirty"&gt;Minimum chars: 5, maximum 25&lt;/li&gt;
  
  
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="addressLineOne"&gt;Address&lt;/label&gt;
        &lt;div class="col-5"&gt;
          &lt;input [ngClass]="{'is-invalid': (form.controls.addressLineOne.errors &amp;&amp; form.controls.addressLineOne.dirty) ,
       'is-valid': !form.controls.addressLineOne.errors}" id="addressLineOne" class="form-control" type="text" name="addressLineOne" (autocomplete)="off" placeholder="Address" formControlName="addressLineOne" (blur)="checkEmail()"/&gt;
  
          &lt;ul class="help-block"&gt;
            &lt;li *ngIf="form.controls.addressLineOne.errors?.required &amp;&amp; form.controls.addressLineOne.dirty"&gt;Requiredt&lt;/li&gt;
  
  
  
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="city"&gt;City&lt;/label&gt;
        &lt;div class="col-5"&gt;
          &lt;input  [ngClass]="{'is-invalid': (form.controls.city.errors &amp;&amp; form.controls.city.dirty), 'is-valid': !form.controls.city.errors}" id="city" class="form-control" type="text" name="city" (autocomplete)="off" placeholder="City" formControlName="city"/&gt;
          &lt;ul class="help-block"&gt;
            &lt;li *ngIf="form.controls.city.errors?.required &amp;&amp; form.controls.city.dirty"&gt;Requiredt&lt;/li&gt;
  
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  &lt;div class="form-group"&gt;
        &lt;label for="email"&gt;Email&lt;/label&gt;
        &lt;div class="col-5"&gt;
  
          &lt;input [ngClass]="{'is-invalid': (form.controls.email.errors &amp;&amp; form.controls.email.dirty),
       'is-valid': !form.controls.email.errors}" id="email" class="form-control" type="text" name="email" (autocomplete)="off" placeholder="Email" formControlName="email"/&gt;
  
          &lt;ul class="help-block"&gt;
            &lt;li *ngIf="form.controls.email.errors?.required &amp;&amp; form.controls.email.dirty"&gt;Required&lt;/li&gt;
            &lt;li *ngIf="(form.controls.email.errors?.minlength || form.controls.email.errors?.maxlength) &amp;&amp; form.controls.email.dirty"&gt;Minimum chars: 5, maximum 35&lt;/li&gt;
  
  
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  
      &lt;div class="form-group"&gt;
        &lt;label for="country"&gt;Country&lt;/label&gt;
        &lt;div class="col-5"&gt;
          &lt;input  [ngClass]="{'is-invalid': (form.controls.country.errors &amp;&amp; form.controls.country.dirty) , 'is-valid': !form.controls.country.errors}" id="country"  class="form-control" type="text" name="country" (autocomplete)="off" placeholder="Country" formControlName="country"/&gt;
          &lt;ul class="help-block"&gt;
            &lt;li *ngIf="form.controls.country.errors?.required &amp;&amp; form.controls.country.dirty"&gt;Required&lt;/li&gt;&lt;/ul&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label for="postalCode"&gt;Postal code&lt;/label&gt;
        &lt;div class="col-5"&gt;
          &lt;input  [ngClass]="{'is-invalid': (form.controls.postalCode.errors &amp;&amp; form.controls.postalCode.dirty) , 'is-valid': !form.controls.postalCode.errors}" id="postalCode"  class="form-control" type="text" name="postalCode" (autocomplete)="off" placeholder="Postal Code" formControlName="postalCode"/&gt;
          &lt;ul class="help-block"&gt;
            &lt;li *ngIf="form.controls.postalCode.errors?.required &amp;&amp; form.controls.postalCode.dirty"&gt;Required&lt;/li&gt;&lt;/ul&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label for="phone"&gt;Phone&lt;/label&gt;
        &lt;div class="col-5"&gt;
          &lt;input  [ngClass]="{'is-invalid': (form.controls.phone.errors &amp;&amp; form.controls.phone.dirty), 'is-valid': !form.controls.phone.errors}" id="phone"  class="form-control" type="text" name="phone" (autocomplete)="off" placeholder="Aantal kilometers" formControlName="phone"/&gt;
          &lt;ul class="help-block"&gt;
            &lt;li *ngIf="form.controls.phone.errors?.required &amp;&amp; form.controls.phone.dirty"&gt;Required&lt;/li&gt;&lt;/ul&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;input [disabled]="!form.valid || processing" type="submit" class="btn btn-primary" value="Submit" /&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>this is my CreateForm function in `client.component.ts'</p>
  
  <pre><code>createForm() {
  this.form = this.formBuilder.group(
    {
      company: ['', Validators.compose([
        Validators.required,
        Validators.minLength(5),
        Validators.maxLength(35),
  
  
      ])],
      addressLineOne: ['', Validators.compose([
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(35),
  
      ])],
      city: ['', Validators.compose([
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(35),
  
      ])],
      country: ['', Validators.compose([
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(35),
  
      ])],
      postalCode: ['', Validators.compose([
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(35),
  
      ])],
      phone: ['', Validators.compose([
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(35),
  
      ])],
      email: ['', Validators.compose([
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(35),
  
      ])],
  
    }
  )
  </code></pre>
  
  <p>}</p>
  
  <p>Why is it saying that email is undefined? I dont get it, I have declared it in the formbuilder.group 
  If you need more info, please let me know</p>