<h2 mat-dialog-title> Registro de tabla </h2>
<mat-dialog-content class="remove-button-padding-dialog-content">

  <form class="override_content_flex">
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>Tabla</mat-label>
        <input 
          matInput 
          placeholder="Ingrese el nombre de la tabla" 
          maxlength="12"
          oninput="this.value = this.value.toUpperCase();"
          [formControl]="formControl">
        <mat-hint align="end">{{formControl.value.length}} / 12</mat-hint>
        @if (formControl.hasError('required')) {
          <mat-error title="El campo Tabla es requerido">
            El campo <b>Tabla</b> es requerido
          </mat-error>
        }
        @if (formControl.hasError('minlength')) {
          <mat-error title="El campo Tabla debe tener 12 caracteres">
            El campo <b>Tabla</b> debe tener 12 caracteres
          </mat-error>
        }
      </mat-form-field>
    </div>
  </form>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button 
    mat-button 
    cdkFocusInitial 
    (click)="save()"
    [disabled]="formControl.invalid">
    Guardar
  </button>
</mat-dialog-actions>
