add-integrantes-comision.component.html

<!--Importaciones necesarias-->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<!--segunda opicon-->

<div class="contenedor">
  <div class="sobremontado">
    <span class="icono-instituciones material-icons">new_label</span>
    Agregar una Configuración
    <button class="volver" (click)="volver()">
      <mat-icon>keyboard_arrow_left</mat-icon>
    </button>
  </div>

  <div class="contenedor-dos">

<!--
    <div class="busqueda">
      <mat-form-field appearance="outline">
        <mat-label>Nombres</mat-label>
        <input matInput [(ngModel)]="searchTerm" (ngModelChange)="realizarBusqueda()" placeholder="Realizar búsqueda" />
      </mat-form-field>

      <mat-autocomplete *ngIf="usuarios" [displayWith]="displayFn">
        <mat-option *ngFor="let usuario of usuarios" (clic)="onUsuarioSelected(usuario)" [value]="usuario" >
          {{ usuario.uzytusuario_nombres }} {{ usuario.uzytusuario_apellidos }}
        </mat-option>
      </mat-autocomplete>



    </div>
-->

<div class="busqueda">
  <mat-form-field appearance="outline">
    <mat-label>Nombres</mat-label>
    <input matInput [(ngModel)]="searchTerm" (ngModelChange)="realizarBusqueda()" placeholder="Realizar búsqueda" />
  </mat-form-field>

  <mat-autocomplete *ngIf="usuarios" [displayWith]="displayFn">
    <mat-option *ngFor="let usuario of usuarios" [value]="usuario" (onSelectionChange)="onUsuarioSelected(usuario)">
      {{ usuario.uzytusuario_nombres }} {{ usuario.uzytusuario_apellidos }}
    </mat-option>

  </mat-autocomplete>

</div>
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()" class="formulario">

      <div class="input-container">
        <mat-form-field class="example-full-width">
          <mat-label>Nombre:</mat-label>
          <input matInput formControlName="nombre" [value]="selectedUsuario?.uzytusuario_nombres" required>
          <mat-error
            *ngIf="myForm.get('nombre').invalid && (myForm.get('nombre').dirty || myForm.get('nombre').touched)">
            Por favor, ingrese la descripción.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="input-container">
        <mat-form-field class="example-full-width">
          <mat-label>Apellido:</mat-label>
          <input matInput formControlName="apellido" [value]="selectedUsuario?.uzytusuario_apellidos" required>
          <mat-error
            *ngIf="myForm.get('apellido').invalid && (myForm.get('apellido').dirty || myForm.get('apellido').touched)">
            Por favor, ingrese la descripción.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="input-container">
        <mat-form-field class="example-full-width">
          <mat-label>Correo Electrónico:</mat-label>
          <input matInput formControlName="email" [value]="selectedUsuario?.uzytusuario_email" required>
          <mat-error *ngIf="myForm.get('email').invalid && (myForm.get('email').dirty || myForm.get('email').touched)">
            Por favor, ingrese la descripción.
          </mat-error>
        </mat-form-field>
      </div>

      <div class="input-container">
        <mat-form-field>
          <mat-label>Fecha:</mat-label>
          <input matInput [matDatepicker]="picker" placeholder="Seleccione una fecha"
            formControlName="fechaConfiguracion" required>

          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
      </div>

      <div>
        <label for="direccion">Estado:</label>
        <mat-checkbox formControlName="activo">Activo</mat-checkbox>
      </div>
      <button mat-raised-button color="primary" [disabled]="myForm.invalid" (click)="onSubmit()">Guardar</button>
    </form>
  </div>
</div>