Angular 2模板驅動表單組驗證

Question

我有一個關於角度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來說明： 表單驗證示例

但我發現它很難看，而且我強行檢查兩種形式，以確定是否有任何問題。 所以最后我的問題是：我可以將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>