title: How to avoid mat-form-field Validation trigger when matInput lose focus?
body: <p>I have the following FormGroup in createGroup.component.ts</p>
  
  <pre><code>    this.formGroup = new FormGroup({
    groupName: new FormControl({ value: this.data.groupName, disabled: this.isEditPopup }, [
      Validators.required
    ]),
    groupDescription: new FormControl(this.data.groupDescription, [
    ]),
    groupId: new FormControl(this.data.groupId, [
    ])
  });
  </code></pre>
  
  <p>I have the below angular html that uses material directives in createGroup.component.html</p>
  
  <pre><code>&lt;form [formGroup]="formGroup" (ngSubmit)="onSubmit()"&gt;
          &lt;mat-form-field&gt;
              &lt;input matInput formControlName="groupName" placeholder="Group name*"&gt;
          &lt;/mat-form-field&gt;`enter code here`
          &lt;div *ngIf="(formGroup.controls['groupName'].touched)"&gt;
              &lt;mat-error *ngIf="formGroup.controls['groupName'].hasError('required') "&gt;
                  Group Name is required
              &lt;/mat-error&gt;
      &lt;/div&gt;
  
      &lt;div mat-dialog-actions&gt;
          &lt;button mat-button [ngClass]="['btn','btn-success','active']" type="submit"&gt;Ok&lt;/button&gt;
          &lt;button mat-button (click)="cancelDialog($event)" type="button"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The problem is, when cursor out focus the input, the formGroup validation gets triggered.
  <a href="https://i.stack.imgur.com/BnuqR.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>I need to trigger validation errors on mat-form-field only if the user pressed submit or the input is dirty, not when input is blur and touched.</p>