agregar-instu.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" />

<div class="contenedor">
  <div class="sobremontado">
    <span class="icono-instituciones material-icons">new_label</span>
    Agregar una Institución
    <button class="volver" (click)="volver()">
      <mat-icon>keyboard_arrow_left</mat-icon>
    </button>
  </div>
  <div class="contenedor-dos">
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()" class="formulario">
      <!-- Información de la institución -->
      <div class="columna-izquierda">
        <div>
          <label for>
            <h2>Datos de la Institución</h2>
          </label>
        </div>
        <div>
          <mat-form-field class="example-full-width">
            <mat-label>Nombre de la Institución</mat-label>
            <input matInput formControlName="nombreFormControl" required>
            <mat-error *ngIf="myForm.get('nombreFormControl').invalid && (myForm.get('nombreFormControl').dirty 
            || myForm.get('nombreFormControl').touched)">
              Por favor, ingrese un nombre valido.
            </mat-error>
          </mat-form-field>
        </div>

        <div>
          <mat-form-field class="example-full-width">
            <mat-label>Seleccione una Provincia</mat-label>
            <mat-select formControlName="provincia" required [(ngModel)]="selectedProvincia"
              (ngModelChange)="obtenerCantones($event?.uzytprovincia_id)">

              <mat-option *ngFor="let provincia of provincia" [value]="provincia">
                {{ provincia.uzytprovincia_nombre }}
              </mat-option>

            </mat-select>

            <mat-error *ngIf="myForm.get('provincia').invalid && (myForm.get('provincia').dirty 
            || myForm.get('provincia').touched)">
              Por favor, ingrese un nombre valido.
            </mat-error>
          </mat-form-field>
        </div>
        <div>
          <mat-form-field class="example-full-width">
            <mat-label>Seleccione un Canton</mat-label>

            <mat-select formControlName="canton" required [(ngModel)]="selectedCanton"
              (ngModelChange)="obtenerParroquias($event?.uzytcanton_id)">

              <mat-option *ngFor="let canton of canton" [value]="canton">
                {{ canton.uzytcantonnombre }}
              </mat-option>

            </mat-select>

            <mat-error *ngIf="myForm.get('canton').invalid && (myForm.get('canton').dirty 
            || myForm.get('canton').touched)">
              Por favor, ingrese un nombre valido.
            </mat-error>
          </mat-form-field>
        </div>
        <div>

          <mat-form-field class="example-full-width">
            <mat-label>Parroquia</mat-label>
            <mat-select formControlName="parroquia" required [(ngModel)]="selectedParroquiaId" [disabled]="!selectedCanton">
              <mat-option *ngFor="let parroquia of parroquia" [value]="parroquia.uzytparroquia_id">
                {{ parroquia.uzytparroquia_nombre }}
              </mat-option>
            </mat-select>
            
            <mat-error *ngIf="myForm.get('parroquia').invalid && (myForm.get('parroquia').dirty 
            || myForm.get('parroquia').touched)">
              Por favor, ingrese un nombre valido.
            </mat-error>
          </mat-form-field>
          
        </div>
        <div>
          <mat-form-field class="example-full-width">
            <mat-label>Dirección</mat-label>
            <input matInput formControlName="direccionFormControl" required>
            <mat-error *ngIf="myForm.get('direccionFormControl').invalid && 
            (myForm.get('direccionFormControl').dirty 
            || myForm.get('direccionFormControl').touched)">
              Por favor, ingrese una Dirección valida.
            </mat-error>
          </mat-form-field>
        </div>

        <div>
          <mat-form-field class="example-full-width">
            <mat-label>Telefono</mat-label>
            <input matInput formControlName="telefonoFormControl" required pattern="[0-9]+">
            <mat-error *ngIf="myForm.get('telefonoFormControl').invalid && 
            (myForm.get('telefonoFormControl').dirty 
            || myForm.get('telefonoFormControl').touched)">
              Por favor, ingrese una Dirección valida.
            </mat-error>
          </mat-form-field>
        </div>
      </div>

      <!-- Información del representante -->
      <div class="columna-derecha">

        <div>
          <label for>
            <h2>Información del Representante</h2>
          </label>
        </div>
        <div>
          <mat-form-field class="example-full-width">
            <mat-label>Nombre del Representante</mat-label>
            <input matInput formControlName="nombreRepeFormControl" required>
            <mat-error *ngIf="myForm.get('nombreRepeFormControl').invalid && 
            (myForm.get('nombreRepeFormControl').dirty 
            || myForm.get('nombreRepeFormControl').touched)">
              Por favor, ingrese un nombre valido.
            </mat-error>
          </mat-form-field>
        </div>

        <div>
          <mat-form-field class="example-full-width">
            <mat-label>Apellido del Representante</mat-label>
            <input matInput formControlName="apellidoRepre" required>
            <mat-error *ngIf="myForm.get('apellidoRepre').invalid && 
            (myForm.get('apellidoRepre').dirty 
            || myForm.get('apellidoRepre').touched)">
              Por favor, ingrese un apellido valido.
            </mat-error>
          </mat-form-field>
        </div>

        <div>
          <mat-form-field class="example-full-width">
            <mat-label>Cargo del Representante</mat-label>
            <input matInput formControlName="cargoRepre" required>
            <mat-error *ngIf="myForm.get('cargoRepre').invalid && 
            (myForm.get('cargoRepre').dirty 
            || myForm.get('cargoRepre').touched)">
              Por favor, ingrese un cargo valido.
            </mat-error>
          </mat-form-field>
        </div>
        <div>
          <mat-form-field class="example-full-width">
            <mat-label>Telefono del Representante</mat-label>
            <input matInput formControlName="telefonoRepreFormControl" required pattern="[0-9]+">
            <mat-error *ngIf="myForm.get('telefonoRepreFormControl').invalid && 
            (myForm.get('telefonoRepreFormControl').dirty 
            || myForm.get('telefonoRepreFormControl').touched)">
              Por favor, ingrese un teléfono valido.
            </mat-error>
          </mat-form-field>
        </div>

        <div>
          <mat-form-field class="example-full-width">
            <mat-label>Email del Representante</mat-label>
            <input matInput formControlName="emailRepreFormControl" required>
            <mat-error *ngIf="myForm.get('emailRepreFormControl').invalid && 
            (myForm.get('emailRepreFormControl').dirty 
            || myForm.get('emailRepreFormControl').touched)">
              Por favor, ingrese un teléfono valido.
            </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>
      </div>

      <button mat-raised-button color="primary" [disabled]="myForm.invalid" >Guardar</button>
    </form>
  </div>

</div>