Angular 验证模板表单（非反应表单）中的复选框列表2

如何验证是否从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>

我已经检查了反应形式的方法。所以，我们想看看如何在模板表单中实现这一点。 使用我上面粘贴的代码，一切正常，但在页面加载时，错误消息会显示出来，因为没有检查脏的或触摸过的页面。我被这个问题困住了

在此方面的任何帮助都将不胜感激

---

谢谢。

看看这个，你需要适应：

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

---

我看到了两个可行的选择。我会选择第一种方法，只是因为我建议避免模板中的任何方法，因为您无法限制何时以及多久触发一次该方法。特别是如果您有一个视图，其中有许多方法可以以某种方式修改数据，那么即使该方法与实际的复选框无关，也会触发该方法。稍后再找样品

所以我要做的就是改变

*ngIf="!isAtleastOneItemSelected()"

要改为检查变量，请执行以下操作：

*ngIf="nonChecked"

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

check（）{
const selectedItems=this.items.filter（（item）=>item.isSelected==true）；
如果（选择editems.length>0）{
this.nonChecked=false；
}否则{
this.nonChecked=true；
}    
}

现在，只有在触摸复选框时才会触发

---

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

然后你可以做：

至少选择一项

其中

f

是表单的名称。但是，正如前面提到的，这将触发更改检测，并在DOM中执行任何其他操作。这里是这个解决方案的一个示例，我们在DOM中只有一个其他字段（请参阅控制台），因此，如果您有很多事情要做，我建议使用第一个解决方案：）但是无论哪种方式，都可以

---

这如何防止显示初始错误消息，即当控件未被弄脏或触摸时？但是，在初始页面加载时，此错误消息仍将显示，因为没有检查任何关联的模型。您能创建一个plunkr吗？我也是，我在这方面花了一些时间，似乎不可能：（form.valid始终为True您不可能使用普通ngModel和自定义验证器进行验证。因为您有一个复选框列表，您如何知道它们是相关的？您必须使用formGroup对它们进行分组，然后使用被动表单进行自定义验证器。工作示例

*ngIf="!isAtleastOneItemSelected()"

*ngIf="nonChecked"