如何验证是否从 Angular 2 模板表单的复选框列表中选择了至少 1 个复选框?
HTML 代码。
<div class="form-control" style="max-height: 300px; overflow: auto">
<div *ngFor="let item of items" class="checkbox">
<label for="{{item.id}}">
<input type="checkbox" value="{{item.id}}" required id="{{item.id}}" [(ngModel)]="item.isSelected" />
<span class="text-body">{{item.name}}</span>
</label>
</div>
</div>
<div *ngIf="!isAtleastOneItemSelected()" class="alert alert-error">
Select at least one item
</div>
组件代码。
public isAtleastOneItemSelected() {
const selectedItems = this.items.filter((item) => item.isSelected);
if (selectedItems.length > 0) {
return true;
} else {
return false;
}
}
我已经在这里检查了 Reactive 形式的方法。所以,想检查我们如何在模板表单中做到这一点。使用我上面粘贴的代码,一切正常,但在页面加载时显示错误消息,因为那里没有检查脏或触摸。我被这个问题困住了。
对此的任何帮助将不胜感激。
谢谢。