add-role-dialog.component.html

<mat-card>
  <mat-toolbar color="primary">Add Role</mat-toolbar>
  <form [formGroup]="form">
    <mat-card-content>
      <div fxLayout="row wrap">
        <div class="pb-1">
          <mat-form-field fxFlex style="width: 100%">
            <input matInput placeholder="Role Name" [formControl]="form.controls['role']" required>
            <mat-error *ngIf="form.controls['role'].hasError('required') && form.controls['role'].touched"
              class="mat-text-warn">You must include role name.</mat-error>
          </mat-form-field>
        </div>
      </div>
    </mat-card-content>
    <hr>
    <mat-card-actions>
      <button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Submit</button>
      <button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
    </mat-card-actions>
  </form>
</mat-card>