Angular 2 模板驱动的表单组验证

Question

我有一个关于 angular 2 模板驱动表单的问题。我已经设置了其中一个表单，如果表单组中的一个输入无效，我希望能够向用户显示警告。

例如，假设我有以下表格：

<form class="form" #f="ngForm" (submit)="submit()">
    <div class="form-group">
       <input type="text" name="firstName" required [(ngModel)]="user.firstName">
       <input type="text" name="lastName" required [(ngModel)]="user.lastName">
    </div>
    <div class="form-group">
        <input type="text name="address" required [(ngModel)]="user.address">
    </div>
    <button type="submit" [disabled]="!f.valid">Submit</button>
</form>

如果 firstName 和/或 lastName 无效，我希望包含输入“firstName”和输入“lastName”的整个表单组进行更改。我知道我可以做这样的事情：

<div class="form-group" [class.has-error]="!firstName.valid || !lastName.valid">
   <input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel">
   <input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel">
</div>

它会工作得很好。但这里是棘手的部分：在这个例子中，我只有两个输入和一个简单的验证规则，所以它很容易检查并且仍然可读。但是，如果我有 10 个输入来检查表单组怎么办？我不想最终不得不手动检查每个输入的有效性。

我找到的一个解决方案是在第一个子表单中创建一个子表单：

<form class="form" #f="ngForm" (submit)="submit()">
    <form #subForm="ngForm" [class.has-error]="!subForm.valid">
       <input type="text" name="firstName" required [(ngModel)]="user.firstName">
       <input type="text" name="lastName" required [(ngModel)]="user.lastName">
    </form>
    <div class="form-group">
        <input type="text name="address" required [(ngModel)]="user.address">
    </div>
    <button type="submit" [disabled]="!f.valid || subForm.valid">Submit</button>
</form>

这是我创建的一个 plunker 来说明： form validation example

但是我觉得很丑，我强行检查了这两个表格，看看有没有问题。所以最后我的问题是：我可以将 div 设置为 2 ngForm 角度以便能够一次验证多个输入吗？基本上有没有比创建子表单更好的方法来执行这种验证？比如类似的东西：

<div class="form-group" #names [class.has-error]="!names.valid">
   <input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel">
   <input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel">
</div>

PS：我知道使用函数是另一种解决方案，但它具有相同的缺点：您必须手动检查每个输入，这取决于验证规则，这可能会变得非常棘手，而且您正在失去使用的优势之一模板驱动的表单而不是响应式表单。

Answer 1

是的，您可以为此使用 ngModelGroup 指令。

<form class="form" #f="ngForm" novalidate>

  <div class="form-group" #fgName="ngModelGroup" ngModelGroup="name" [class.has-error]="!fgName.valid">
    <input type="text" class="form-control" name="firstName"
            [(ngModel)]="user.firstName"
            placeholder="first name"
            required>

    <input type="text" class="form-control" name="lastName"
            [(ngModel)]="user.lastName"
            placeholder="last name"
            required>
  </div>

  <div class="form-group">
    <input type="text" class="form-control" name="address"
            [(ngModel)]="user.address"
            placeholder="address"
            required>
  </div>

  <button class="btn btn-primary" [disabled]="!f.valid">Submit</button>

</form>