<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()">Editar</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>Seleccionar Carrera</mat-label>
          <mat-select [(value)]="selectedCarreraId" formControlName="carrera">              
            <mat-option *ngFor="let carrera of carrera" [value]="carrera.codigo_CARRERA">
              {{ carrera.nombre_CARRERA }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      
      <div class="input-container">
        <mat-form-field class="contenedor-dos">
          <mat-label>Número de Estudiantes Participantes:</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 docentes Participantes.
          </mat-error>
        </mat-form-field>
      </div>


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