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


    <div>
      <h3>Tipo Directos</h3>
        <mat-form-field>
          <mat-label><span class="label-bold">Hombres</span></mat-label>
          <input matInput type="number" formControlName="hombre" (change)="calcularTotal()" min="0" required>
        </mat-form-field>
        <mat-form-field>
          <mat-label><span class="label-bold">Mujeres</span></mat-label>
          <input matInput type="number" formControlName="mujer" (change)="calcularTotal()" min="0" required>
        </mat-form-field>
        <mat-form-field>
          <mat-label><span class="label-bold">Niños</span></mat-label>
          <input matInput type="number" formControlName="ninos" (change)="calcularTotal()" min="0" required>
        </mat-form-field>
        <mat-form-field>
          <mat-label><span class="label-bold">Discapacidad</span></mat-label>
          <input matInput type="number" formControlName="discapacidad" (change)="calcularTotal()" min="0" required>
        </mat-form-field>
        <span class="label-bold">Total: {{ totalDirectos }}</span>
      </div>


    <div>
      <h3>Tipo Indirectos</h3>
        <mat-form-field>
          <mat-label><span class="label-bold">Hombres</span></mat-label>
          <input matInput type="number" formControlName="hombrei" (change)="calcularTotal()" min="0" required>
        </mat-form-field>
        <mat-form-field>
          <mat-label><span class="label-bold">Mujeres</span></mat-label>
          <input matInput type="number" formControlName="mujeri" (change)="calcularTotal()" min="0" required>
        </mat-form-field>
        <mat-form-field>
          <mat-label><span class="label-bold">Niños</span></mat-label>
          <input matInput type="number" formControlName="ninosi" (change)="calcularTotal()" min="0" required>
        </mat-form-field>
        <mat-form-field>
          <mat-label><span class="label-bold">Discapacidad</span></mat-label>
          <input matInput type="number" formControlName="discapacidadi" (change)="calcularTotal()" min="0" required>
        </mat-form-field>
        <span class="label-bold">Total: {{ totalIndirectos }}</span>
      </div>   
    <button mat-raised-button color="primary" [disabled]="myForm.invalid"  >Guardar</button>
  </form>
</div>