Angular 2模板驅動窗體組驗證

我有一個關於角2模板驅動窗體的問題。我已經設置了一個這種形式，我希望能夠給用戶一個警告顯示，如果表單組中的一個輸入無效。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和/或姓氏無效。我知道我可以做這樣的事情：

<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-group呢？我不想最終不得不手動檢查每個輸入的有效性。

一個我找到了解決的是第一個創建的內子窗體：

<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：我知道使用功能是另一種解決方案，但它具有相同的缺點：你要檢查手工每投入，這取決於它可以在驗證規則變得相當棘手，再加上你失去了使用模板驅動的形式而不是反應式的好處。

來源

2017-02-09 Orodan

重擊者會很有幫助。 –

我剛加了一個plunker來說明我在說什麼，希望對你有所幫助:) – Orodan

有關信息，'form'嵌套在另一個'form' [是無效的HTML和XHTML]（https://stackoverflow.com/問題/ 555928/is-it-valid-to-has-a-html-form-inside-another-html-form） – Pac0

是的，你可以使用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>

來源

2017-02-09 14:22:43

這就是我一直在尋找的！非常感謝：） – Orodan

Angular 2模板驅動窗體組驗證

回答

相關問題