Multiple forms in single html angular2

Question

I have the following code :

<md2-dialog #techniciansDialog>
  <md2-dialog-title color="primary">Técnicos</md2-dialog-title>
  <form #technicianForm="ngForm">
    <div style="display: table; width: 100%;">
      <div style="display: table; width: 100%;">
        <div style="vertical-align:middle; width:50%; display: table-cell;">
          <md-input-container>
            <input mdInput [(ngModel)]="technician.name" name="nameTechnician" type="text" placeholder="Nome" required>
          </md-input-container>
        </div>
      </div>

      <div style="vertical-align:middle; width:50%; display: table-cell;">
        <md-input-container>
          <input mdInput [(ngModel)]="technician.responsability" name="responsabilityTechnician" type="text"
                 placeholder="Responsabilidade" required>
        </md-input-container>
      </div>
    </div>

    <div style="display: table; width: 100%;">
      <div style="vertical-align:middle; width:50%; display: table-cell;">
        <md-input-container>
          <input mdInput [(ngModel)]="technician.phone" name="phoneTechnician" type="text" placeholder="Telefone"
                 required>
        </md-input-container>
      </div>

      <md-input-container>
        <input mdInput [(ngModel)]="technician.email" name="emailTechnician" type="text" placeholder="Email" required>
      </md-input-container>

      <md-input-container>
        <input mdInput [(ngModel)]="technician.password" name="passwordTechnician" type="password"
               placeholder="Password" required>
      </md-input-container>
    </div>
  </form>
  <md2-dialog-footer>
    <div *ngIf="!update;then content else other_content"></div>
    <ng-template #content>
      <button md-raised-button color="primary" [disabled]="!technicianForm.form.valid"
              (click)="gravarDadosTechnician(); technicianForm.reset()">Criar
      </button>
    </ng-template>
    <ng-template #other_content>
      <button md-raised-button color="primary" [disabled]="!technicianForm.form.valid"
              (click)="sendUpdateDadosTechnician(techniciansDialog); technicianForm.reset()">Atualizar
      </button>
    </ng-template>
    <button md-raised-button color="primary" (click)="closeDialog(techniciansDialog); technicianForm.reset()">Fechar
    </button>
  </md2-dialog-footer>

</md2-dialog>

<md2-dialog #serviceDialog>
  <md2-dialog-title color="primary">Serviços</md2-dialog-title>
  <form #servicesForm="ngForm" name="servicesForm">
    <div style="display: table; width: 100%;">
      <div *ngIf="!update;then divcreate else divupdate"></div>
      <div style="vertical-align:middle; width:50%; display: table-cell;">
        <md-input-container>
          <input mdInput [(ngModel)]="service.name" name="nameService" type="text" placeholder="Nome" required>
        </md-input-container>
      </div>
    </div>

    <div style="display: table; width: 100%;">
      <div style="vertical-align:middle; width:50%; display: table-cell;">
        <md-input-container>
          <input mdInput [(ngModel)]="service.SLA" name="SLA" type="text" placeholder="SLA (HORAS)" required>
        </md-input-container>
      </div>

      <div style="vertical-align:middle; width:50%; display: table-cell;">
        <md-input-container>
          <input mdInput [(ngModel)]="service.description" name="descriptionService" type="text"
                 placeholder="description"
                 required>
        </md-input-container>
      </div>
    </div>
  </form>

  <md2-dialog-footer>
    <div *ngIf="!update;then content else other_content"></div>
    <ng-template #content>
      <button md-raised-button color="primary" [disabled]="!servicesForm.form.valid"
              (click)="gravarDadosServices(); servicesForm.reset()">Criar
      </button>
    </ng-template>
    <ng-template #other_content>
      <button md-raised-button color="primary" [disabled]="!servicesForm.form.valid"
              (click)="sendUpdateDadosServices(serviceDialog); servicesForm.reset()">Atualizar
      </button>
    </ng-template>
    <button md-raised-button color="primary" (click)="closeDialog(serviceDialog); servicesForm.reset()">Fechar</button>
  </md2-dialog-footer>

</md2-dialog>

Both forms work perfectly when i dont validate them, or if i just validate one of them.

Ex:

servicesForm works fine with the validation but when i go to fill the technicianForm it does not validate even if i fill the fields correctly.

technicianForm just not answer, it stays false the technicianForm.form.valid

So if i take off #servicesForm, #technicianForm works perfectly.

How can i validate those multiple forms fields, because i will have more 2 forms on the same page.

Do i have to make a form validation on my .ts file for each and one of them?

Answer 1

So I'm posting an answer so we can close this question. There are several options.

1) You could create a separate component for each form and nest those components in a parent component that contains the desired set of forms. That provides a good separation of concerns and keeps each component small.

2) If the purpose of the multiple forms is for grouping (and not separate submit) you could use FormGroup to track a related set of controls. But that does not sound like the case here.

You could also check out Kara's videos here for additional options and discussion: https://www.youtube.com/watch?v=MfILq1LNSUk

Answer 2

You can also explicitly check for form errors/field errors if you check if the form or field is not undefined like this:

[disabled]="technicianForm && technicianForm.form.invalid"

Or, if you have a required field, for example, and want to show an error (input field with: #name="ngModel"):

<div class="col-md-12 text-danger" *ngIf="name && name.errors && name.touched">
    {{ '_MY_NAME_ERROR_' | translate }}
</div>

This worked for me with multiple forms (built like #myform="ngForm") in one template with one component.