typescript 单个 html angular2 中的多个表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44808087/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple forms in single html angular2
提问by vasconcelosvcd
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:
前任：
servicesFormworks fine with the validation but when i go to fill the technicianFormit does not validate even if i fill the fields correctly.
servicesForm验证工作正常，但当我填写时，technicianForm即使我正确填写字段，它也不会验证。
technicianFormjust not answer, it stays false the technicianForm.form.valid
technicianForm只是不回答，它保持错误 technicianForm.form.valid
So if i take off #servicesForm, #technicianFormworks perfectly.
所以如果我起飞#servicesForm，#technicianForm效果很好。
How can i validate those multiple forms fields, because i will have more 2 forms on the same page.
我如何验证这些多个表单字段，因为我将在同一页面上有更多 2 个表单。
Do i have to make a form validation on my .ts file for each and one of them?
我是否必须对我的 .ts 文件中的每一个进行表单验证？
回答by DeborahK
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.
1) 您可以为每个表单创建一个单独的组件，并将这些组件嵌套在包含所需表单集的父组件中。这提供了良好的关注点分离并保持每个组件很小。
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.
2）如果多个表单的目的是分组（而不是单独提交），您可以使用 FormGroup 来跟踪一组相关的控件。但这听起来不像这里的情况。
You could also check out Kara's videos here for additional options and discussion: https://www.youtube.com/watch?v=MfILq1LNSUk
您还可以在此处查看 Kara 的视频以获取其他选项和讨论：https: //www.youtube.com/watch?v=MfILq1LNSUk
回答by Guntram
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"):
或者，例如，如果您有一个必填字段，并且想要显示错误（输入字段为：#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.
这对我有用，在一个模板中使用多个表单（像 #myform="ngForm" 一样构建）。
