<h1 mat-dialog-title class="prevent-select">Añadir instrucción</h1>
<div mat-dialog-content class="prevent-select">
  <mat-form-field class="w-100 mt-8" appearance="outline"> 
    <mat-label>Instrucción</mat-label>
    <textarea matInput cols="3" style="resize: none;" [formControl]="stepControl" (input)="stepControl.markAsTouched()"></textarea>
    <mat-error *ngIf="stepControl.hasError('required')">Este campo es obligatorio.</mat-error>
    <mat-error *ngIf="stepControl.hasError('minlength')">La instrucción debe tener al menos 20 caracteres.</mat-error>
  </mat-form-field>
  <mat-form-field class="w-100 mt-8" appearance="outline">
    <mat-label>Especialidades</mat-label>
    <mat-select multiple [formControl]="specialtiesControl">
      <mat-option *ngFor="let item of specialties" [value]="item.ID">
        {{ item.NOMB }} - {{ item.ESP }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button [disabled]="stepControl.invalid || specialtiesControl.invalid" (click)="addInstruction()">Continuar</button>
</div>