单一html angular2中的多种形式

Question

我有以下代码：

<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>

当我不验证它们时，或者如果我只验证其中之一，这两种形式都可以正常工作。

例如：

servicesForm 可以很好地进行验证，但是当我去填写 technicianForm 时，即使我正确填写了字段，它也不会验证。

technicianForm 只是不回答，它保持错误 technicianForm.form.valid

所以如果我起飞 #servicesForm，#technicianForm 完美。

我如何验证那些多个表单字段，因为我将在同一页面上有更多 2 个表单。

我是否必须对我的 .ts 文件中的每一个进行表单验证？

Answer 1

所以我发布了一个答案，这样我们就可以结束这个问题了。有几个选项。

1) 您可以为每个表单创建一个单独的组件，并将这些组件嵌套在包含所需表单集的父组件中。这提供了良好的关注点分离并使每个组件保持较小。

2) 如果多个表单的目的是分组（而不是单独提交），您可以使用 FormGroup 来跟踪一组相关的控件。但这听起来不像这里的情况。

您还可以在此处查看 Kara 的视频以获取更多选项和讨论：https://www.youtube.com/watch?v=MfILq1LNSUk

Answer 2

如果您检查表单或字段是否未定义，您也可以显式检查表单 errors/field 错误：

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

或者，如果您有必填字段，并且想要显示错误（输入字段：#name="ngModel"）：

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

这对我在一个模板中使用多个表单（像#myform="ngForm"一样构建）有效。

单一html angular2中的多种形式

Multiple forms in single html angular2

typescript

angular2-forms

angular-cli

angular