Angular 2 复选框验证

Posted 2023-03-13

【中文标题】Angular 2 复选框验证

【英文标题】：Angular 2 checkbox validation

【发布时间】：2019-08-18 19:09:06

【问题描述】：

我正在尝试通过模板驱动验证 Angular 2 中的复选框但无法正常工作。我在 google 中搜索过也没有人正确回答。任何天才都可以回答这个问题吗？

https://stackblitz.com/edit/angular-9nkywb?file=src%2Fapp%2Fapp.component.html

app.component.html

     <form #f="ngForm"> 
 <input type="checkbox" name="isTCAccepted" [ngModel]="user" required 
     #tc="ngModel">Name1
     <input type="checkbox" name="isTCAccepted" [ngModel]="user" required 
      #tc="ngModel">Name2
     <input type="checkbox" name="isTCAccepted" [ngModel]="user" required 
     #tc="ngModel">Name3

     <div *ngIf="tc.invalid && f.submitted"> 
     Please check atleast one
     </div>  
     <button>Submit</button>
     </form>

【问题讨论】：

看看我的库 Easy Angular，让表单验证变得轻而易举。它已准备好生产，但对于到目前为止缺少文档感到抱歉，它们即将推出。 github.com/adriandavidbrand/ezng这是stackbitz上的一个演示stackblitz.com/edit/…

你能编辑我的 stackblitz 吗？

检查这个 stackblitz：它对你有用吗？ stackblitz.com/edit/…

【参考方案1】：

正如我所见，除了输入标签的名称应该不同之外，代码一切都很好，您可以查看下面的代码， `

<form #f="ngForm"> 
     <input type="checkbox" name="isTCAccepted1" [ngModel]="user" required 
     #tc1="ngModel">Name1
     <input type="checkbox" name="isTCAccepted2" [ngModel]="user" required 
      #tc2="ngModel">Name2
     <input type="checkbox" name="isTCAccepted3" [ngModel]="user" required 
     #tc3="ngModel">Name3
 <div *ngIf="(tc1.invalid && tc2.invalid && tc3.invalid) && f.submitted">
     Please check atleast one
 </div>
 <button>Submit</button>
 </form>

`

【讨论】：

你能用相关的例子补充解释吗？