crear-obra-social.component.html

<div fxLayout="row" fxLayoutAlign="center none" >
</div>
<!-- <div *ngIf="isValidFormSubmitted" class="submitted"> Form submitted successfully. </div> -->
<form #f="ngForm" (ngSubmit)="register(f)" [formGroup]="formGroup">
  <!-- primer fila -->
  <div fxLayout="row" fxLayoutAlign="none" >
      <mat-form-field fxFlex="40" fxFlexOffset="15" class="example-full-width">
        <mat-label>Nombre</mat-label>
        <input matInput placeholder="Ingrese el nombre" autocomplete="off" value="" formControlName="razonSocial">
        <mat-error>
          {{ getError('razonSocial')}}
        </mat-error>
      </mat-form-field>
      <mat-form-field fxFlex="15" fxFlexOffset="5">
        <mat-label>Fecha de creación</mat-label>
        <input matInput [matDatepicker]="picker" autocomplete="off" formControlName="fechaInicioActividad">
        <mat-error>
          {{ getError('fechaInicioActividad')}}
        </mat-error>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
  </div>
  <!-- segunda fila -->
  <div fxLayout="row" fxLayoutAlign="start start">
    <div fxFlex="50" fxFlexOffset="15">
      <div formArrayName="listadoEmail">
        <div *ngFor="let e of listadoEmail.controls; let i = index;">
            <ng-container [formGroupName]="i">
              <div fxFlex="70">
                <mat-form-field class="example-full-width">
                  <mat-label>Correo</mat-label>
                  <input formControlName="email" autocomplete="off" matInput placeholder="Ingrese un correo" value="" >
                  <mat-error>
                    {{ getErrorFormArray(e.get('email'),'email') }}
                  </mat-error>
                </mat-form-field>
              </div>  
              <div fxFlex="30" *ngIf="i>0">
                <button (click)="borrarEmail(i)" mat-raised-button>Borrar</button> 
              </div>
            </ng-container>
          <!-- fin ngfor -->
        </div>
        <!-- fin div arrayname -->
      </div>
      <!-- fin div row -->
    </div>
    <div fxFlex="20">
      <button type="button" (click)="anadirEmail()" mat-raised-button>Agregar correo de contacto</button>
    </div>
    <!-- fin div segunda fila -->
  </div>
  <!-- tercer fila -->
  <div fxLayout="row" fxLayoutAlign="center end" >
    <button fxFlex="30"  
      mat-raised-button
      [disabled]="formGroup.invalid" 
      color="primary">
        Guardar
    </button>
    <button type="reset" fxFlex="30" (click)="resetearFormulario()" mat-raised-button color="warn">Cancelar</button>
  </div>
</form>
<!-- lo siguiente es solo para debug, para ver el estado del formulario -->
<!-- <p>
  Form Status: {{ formGroup.status }}
</p> -->