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模板驱动窗体组验证

回答

相关问题