<h1 mat-dialog-title class="prevent-select">{{ isNew ? 'Registrar' : 'Editar' }} familia</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" (input)="validateFamilyCode(familyCode.value)" #familyCode>
    <mat-error *ngIf="familyCodeControl.hasError('required')">Este campo es requerido.</mat-error>
    <mat-error *ngIf="familyCodeControl.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 familia</mat-label>
    <input matInput [formControl]="familyNameControl" (input)="familyNameControl.markAsTouched()">
    <mat-error *ngIf="familyNameControl.hasError('required')">Este campo es requerido.</mat-error>
    <mat-error *ngIf="familyNameControl.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 || familyNameControl.invalid" (click)="saveFamily()">Guardar</button>
</div>