title: How to use Reactive FormGroup with Angular Material
body: <p>I'm using reactive form group with Angular Material design. However, I'm getting an error:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'invalid' of undefined</p>
  </blockquote>
  
  <p>Pointing to this line of code:</p>
  
  <pre><code>&lt;input formControlName="fieldName" ngDefaultControl matInput placeholder="Field Name"&gt;
  &lt;mat-error *ngIf="fieldName.invalid"&gt;
    Field name is required
  &lt;/mat-error&gt;
  </code></pre>
  
  <p><strong>TS:</strong></p>
  
  <pre><code>export class AddFieldComponent implements OnInit {
    form: FormGroup;
  
    constructor(public fb: FormBuilder) {
        this.form = this.fb.group({
          fieldName: ['', Validators.required],
          fieldType: ['', Validators.required]
        });
      }
    }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div [formGroup]="form" class="add-field"&gt;
    &lt;div mat-dialog-content&gt;
      &lt;h2&gt;Add Fields&lt;/h2&gt;
      &lt;mat-form-field&gt;
        &lt;input formControlName="fieldName" ngDefaultControl matInput placeholder="Field Name"&gt;
        &lt;mat-error *ngIf="fieldName.invalid"&gt;
          Field name is required
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field&gt;
        &lt;mat-select formControlName="fieldType"&gt;
          &lt;mat-option value="text-field"&gt;Text Field&lt;/mat-option&gt;
          &lt;mat-option value="radio-btn"&gt;Radio Button&lt;/mat-option&gt;
        &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
    &lt;div mat-dialog-actions&gt;
      &lt;span class="right-align-next-element"&gt;&lt;/span&gt;
      &lt;button class="secondary-btn" mat-button (click)="closeModal()"&gt;Cancel&lt;/button&gt;
      &lt;button [disabled]="fieldName.invalid" class="primary-btn" mat-button (click)="addFields()" cdkFocusInitial&gt;Add field&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>