add-compromiso.component.html

<div class="container">

  <form class="example-form" [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <mat-card>
      <mat-card-header>
        <div class="save-button">
          <button mat-raised-button color="primary"
            [disabled]="myForm.invalid">Guardar</button>
        </div>
      </mat-card-header>

      <mat-card-content>

        <div class="form-row">
          <div class="form-column">
            <div>
              <mat-label><strong>TIPO DE ENTIDAD</strong></mat-label>
            </div>
            <div class="sepa">
              <mat-radio-group class="sube" formControlName="entidad">
                <mat-radio-button *ngFor="let entidad of entidad" [value]="entidad.uzytparametros_det_id">{{ entidad.uzytparametros_det_descripcion}} </mat-radio-button>
              </mat-radio-group>
            </div>

            <mat-label><strong>INSTITUCIÓN O COMUNIDAD</strong></mat-label>

            <mat-form-field>
              <mat-label>Nombre:</mat-label>
              <mat-select formControlName="nombreI"
                placeholder="Nombre del Proyecto" (selectionChange)="onInstitucionSelected($event.value)">
                <mat-option *ngFor="let item2 of institu" [value]="item2.uzytavinstituc_id">{{item2.uzytavinstituc_nombre}}</mat-option>
              </mat-select>
            </mat-form-field>

            <mat-form-field>
              <mat-label>Provincia:</mat-label>
              <input matInput formControlName="provinciaI">
            </mat-form-field>

            <mat-form-field>
              <mat-label>Dirección</mat-label>
              <input matInput formControlName="direccionI">
            </mat-form-field>

            <mat-form-field>
              <mat-label>Tipo de Organización</mat-label>
              <mat-select formControlName="organizacionI">
                <mat-option *ngFor="let item of orga" [value]="item.uzytparametros_det_id">{{item.uzytparametros_det_descripcion}}</mat-option>
              </mat-select>
            </mat-form-field>

          </div>

          <div class="form-column">

            <mat-label><strong>REPRESENTANTE LEGAL Y/O RESPONSABLE</strong></mat-label>

            <mat-form-field>
              <mat-label>Nombres</mat-label>
              <input matInput [disabled]="true" formControlName="nombreR">
            </mat-form-field>

            <mat-form-field>
              <mat-label>Apellido</mat-label>
              <input matInput [disabled]="true" formControlName="apellidoR">
            </mat-form-field>

            <mat-form-field>
              <mat-label>Cargo</mat-label>
              <input matInput [disabled]="true" formControlName="cargoR">
            </mat-form-field>

            <mat-form-field>
              <mat-label>Correo Electronico</mat-label>
              <input matInput placeholder="Correo Institucional"
                formControlName="correoR">
            </mat-form-field>

            <mat-form-field>
              <mat-label>Telefono</mat-label>
              <input matInput placeholder="Telefono Director"
                formControlName="telefonoR">
            </mat-form-field>

            <mat-form-field>
              <mat-label>Declaración</mat-label>
              <input matInput formControlName="declaracion">
            </mat-form-field>
          </div>

        </div>

      </mat-card-content>
    </mat-card>
  </form>
</div>