asignacion-docentes.component.html

<div class="contenedor-dos">
  <form class="formulario" [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <!-- Información de la institución -->
    <div class="columna-unico">
      <!-- Control de fechas inicio -->
      <div class="save-button">
        <button mat-raised-button class="botones" color="primary" *ngIf="!cambio" (click)="cambiar()">Agregar</button>

        <button mat-raised-button class="botones" color="primary" *ngIf="cambio"
          [disabled]="myForm.invalid">Guardar</button>

        <span class="separator"></span>
        <button mat-raised-button class="botones" color="warn" *ngIf="cambio" (click)="cancelado()">Cancelar</button>
      </div>

      <div class="input-container">
        <mat-form-field class="contenedor-dos">
          <mat-label>Nombres</mat-label>
          <input matInput [formControl]="myControl" formControlName="nombres"
            placeholder="Realizar búsqueda" />
        </mat-form-field>

        <mat-autocomplete *ngIf="usuarios" autoActiveFirstOption >
          <mat-option *ngFor="let usuario of filteredOptions | async" [value]="usuario"
           (click)="onUsuarioSelected(usuario)">
            {{ usuario.uzytusuario_nombres }} {{ usuario.uzytusuario_apellidos }}
          </mat-option>
        </mat-autocomplete>


      </div>


      <div class="input-container">
        <mat-form-field class="contenedor-dos">
          <mat-label>Seleccionar Funcion</mat-label>
          <mat-select formControlName="funcion">
            <mat-option *ngFor="let option of tipres" [value]="option.uzytavtipres_id">
              {{ option.uzytavtipres_descrip }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <div class="input-container">
        <mat-form-field class="contenedor-dos">
          <mat-label>Número de horas planificadas:</mat-label>
          <input matInput formControlName="numero" required pattern="[0-9]+">
          <mat-error *ngIf="myForm.get('numero').invalid && (myForm.get('numero').dirty ||
           myForm.get('numero').touched)">
            Por favor, ingrese un Número de horas planificadas.
          </mat-error>
        </mat-form-field>
      </div>


    </div>
  </form>
</div>