Multiple forms in one html angular2
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 fine when I don't validate them, or just validate one of them.
Example:
servicesForm
works great with validation, but when I go to fill technicianForm
it doesn't validate even though I fill in the fields correctly.
technicianForm
just doesn't answer, it stays false technicianForm.form.valid
So if I shoot #servicesForm
it #technicianForm
works fine.
How can I validate these multiple form fields because I will have more than two forms on one page.
Do I have to do form validation in my .ts file for each and one of them?
source to share
So, I'm posting an answer, so we can close this question. There are several options.
1) You can create a separate component for each form and nest those components in a parent component that contains the desired set of forms. This provides good separation of concerns and keeps each component small.
2) If the purpose of multiple forms is grouping (rather than individual submission), you can use FormGroup to keep track of an associated set of controls. But it doesn't seem like that.
You can also watch Kara videos for more options and discussion: https://www.youtube.com/watch?v=MfILq1LNSUk
source to share
You can also check explicitly for form / field errors if you are checking if the form or field is undefined as follows:
[disabled]="technicianForm && technicianForm.form.invalid"
Or, if you have a required field, for example, and you 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 single component template.
source to share