<h1 mat-dialog-title class="prevent-select">{{ isNew ? 'Registrar' : 'Editar' }} subfamilia</h1>
<div mat-dialog-content class="prevent-select">
  <mat-form-field appearance="outline" class="w-100 pt-8">
    <mat-label>Código de la familia</mat-label>
    <input matInput [formControl]="familyCodeControl">
    <mat-error *ngIf="familyCodeControl.hasError('required')">Este campo es requerido.</mat-error>
  </mat-form-field>
  <mat-form-field appearance="outline" class="w-100 pt-8">
    <mat-label>Código de la subfamilia</mat-label>
    <input matInput [formControl]="subfamilyCodeControl" (input)="verifySubfamilyCode(subfamilyCode.value)" #subfamilyCode>
    <mat-error *ngIf="subfamilyCodeControl.hasError('required')">Este campo es requerido.</mat-error>
    <mat-error *ngIf="subfamilyCodeControl.hasError('maxlength')">La longitud máxima de este campo es de 5 caracteres.</mat-error>
  </mat-form-field>
  <mat-form-field appearance="outline" class="w-100 pt-8">
    <mat-label>Nombre de la subfamilia</mat-label>
    <input matInput [formControl]="subfamilyNameControl" (input)="subfamilyNameControl.markAsTouched()">
    <mat-error *ngIf="subfamilyNameControl.hasError('required')">Este campo es requerido.</mat-error>
    <mat-error *ngIf="subfamilyNameControl.hasError('maxlength')">La longitud máxima de este campo es de 50 caracteres.</mat-error>
  </mat-form-field>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
  <button mat-button [disabled]="familyCodeControl.invalid || subfamilyCodeControl.invalid || subfamilyNameControl.invalid" 
  (click)="saveSubfamily()">Guardar</button>
</div>