title: FormGroup form errors is null Angular Reactive Forms
body: <p>When using Reactive Forms, a formGroup containing FormControls which are invalid(invalid form) is shown as invalid which is normal, but it does not contain any errors.</p>
  
  <p>I should be able to get all the errors from the form in the formGroup.errors but it is null</p>
  
  <p>However, The form state is invalid and under every invalid formControl it gives me the validation error
  What am I missing ? </p>
  
  <p>check for errors:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormControl, Validators } from "@angular/forms";
  import { DB1 } from 'src/app/interfaces/IDB';
  import { DBS } from 'src/app/consts';
  @Component({
    selector: 'app-new-dashboard',
    templateUrl: './new-dashboard.component.html',
    styleUrls: ['./new-dashboard.component.scss']
  })
  export class NewDashboardComponent implements OnInit {
    dbs: string[] = ["DB1", "DB2"]
    selectAxisOptions:string[]  = []
    newDashboardForm = new FormGroup({
      name: new FormControl(null, [Validators.required]),
      db: new FormControl(null, [Validators.required]),
      axis: new FormControl({ value: null, disabled: true }, [Validators.required])
    })
    constructor() { }
  
    ngOnInit() {
    }
    resetForm() {
      this.newDashboardForm.reset()
    }
    onSelectionChanged(evt) {
      let value = evt.target.value;
      this.axis.enable();
      switch (value) {
        case 'DB1':
          {
            this.selectAxisOptions = [...DBS.get("DB1").values()]
            break;
          }
        case 'DB2':
          {
            this.selectAxisOptions = [...DBS.get("DB2").values()]
            break;
          }
  
      }
    }
    onSubmit() {
      console.log(this.newDashboardForm);
  
  
    }
    get name() {
      return this.newDashboardForm.get('name')
    }
    get db() {
      return this.newDashboardForm.get('db')
    }
    get axis() {
      return this.newDashboardForm.get('axis')
    }
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="modal-body"&gt;
      &lt;form [formGroup]="newDashboardForm" (ngSubmit)="onSubmit()"&gt;
          &lt;input formControlName="name" type="text" class="form-control" placeholder="Dashboard Name"&gt;
          &lt;select formControlName="db" (change)="onSelectionChanged($event)" class="custom-select"&gt;
              &lt;option disabled="true" [selected]="true"&gt;select DB&lt;/option&gt;
              &lt;option *ngFor="let db of dbs"&gt;{{db}}&lt;/option&gt;
          &lt;/select&gt;
          &lt;select formControlName="axis" class="custom-select"&gt;
              &lt;option disabled="true" [selected]="true"&gt;select column&lt;/option&gt;
              &lt;option *ngFor="let column of selectAxisOptions"&gt;{{column}}&lt;/option&gt;
          &lt;/select&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="submit" class="btn btn-primary"&gt;Create Dashboard&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>