验证模板表单(非响应式表单)中的复选框列表 角度 2.

Question

如何验证是否从 Angular 2 模板表单的复选框列表中选择了至少 1 个复选框？

网页代码。

<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;
}
}

我已经在这里检查了反应式表单的方式。因此，想检查我们如何在模板表单中执行此操作。 使用我上面粘贴的代码，一切正常，但在页面加载时显示错误消息，因为没有检查脏污或触摸。我被这个问题困住了。

任何这方面的帮助将不胜感激。

谢谢。

Answer 1

好吧，我在这里看到了两个可行的选择。我会选择第一个，只是因为我建议避免模板中的任何方法，因为您无法限制触发该方法的时间和频率。特别是如果您有一个视图，其中包含许多以某种方式修改数据的方法，即使该方法与实际复选框无关，该方法也会被触发。稍后查找示例。

所以我要做的，是改变

*ngIf="!isAtleastOneItemSelected()"

改为检查变量：

*ngIf="nonChecked"

并在单击复选框时具有某种类型的更改事件，这将触发 一些方法，例如：

check() {
const selectedItems = this.items.filter((item) => item.isSelected === true);
if (selectedItems.length > 0) {
this.nonChecked = false;
} else {
this.nonChecked = true;
}    
}

现在，只有在触摸复选框时才会触发此功能。

如果您想

---

保持类似的设置，我看到的另一个选项是将复选框包装在表单组中并观察何时触摸该组，然后才在没有选中项目时才显示错误消息。因此，您将复选框包装在一个组中：

<div ngModelGroup="checkboxes">
<!-- .... -->
</div>

然后你可以做：

<div *ngIf="!isAtleastOneItemSelected() && f.controls?.checkboxes?.dirty">
Select at least one item
</div>  

其中f是表单的名称。但如前所述，这将在更改检测和 DOM 中执行任何其他操作时触发。这是这个解决方案的一个示例，我们在 DOM 中只有一个其他字段(请参阅控制台(，所以如果你有很多事情要做，我建议第一个解决方案:)但无论哪种方式，两者都有效！

http://plnkr.co/edit/VuLNR8H3lasFoK7mRDlG?p=preview

Answer 2

看看这个，你需要适应：

<div *ngFor="let item of items; let i = index" class="checkbox"> 
<label for="{{item.id}}">
<input type="checkbox" value="{{item.id}}" required id="{{item.id}}" [(ngModel)]="item.isSelected" (change)="CheckBoxChanged(i,$event)"/>
<span class="text-body">{{item.name}}</span>
</label>
</div>
<div [hidden]="isAtleastOneItemSelected()" class="alert alert-error">
Select at least one item
</div>

把你的检查逻辑放在这里...：

CheckBoxChanged(i,e){
console.log(i);
if (e.target.checked)
console.log("checked");
else 
console.log("unchecked");
}