angular2组具有必需属性的复选框

Question

我想在Angular2(RC5)中创建一个模板驱动的表单,它将包含一组复选框,绑定到对象的特定属性.现在,我有这样的组,绑定到相应的数组,如:

<div class="checkbox" *ngFor="let prop of properties">
  <label>
    <input type="checkbox" name="option" id="option [(ngModel)]="prop.state"/> 
    {{prop.name}}
  </label>
</div>

虽然这很简单,但我无法弄清楚如何向这组复选框添加必需的属性.我的意思是,我需要强制用户选择至少一个组复选框,否则表单验证将失败.

有任何想法吗？

Answer 1

如果我没读错的话，我假设你有一个包含所有状态的对象或数组，即

properties = [
  { state: false },
  { state: false },
  { state: false },
  // ... etc
];

(ngModelChange)您可以通过监听每个元素来确定是否至少检查了一个。当它触发时，您可以检查以确保至少一个 prop 的状态为 true，即在模板文件中：

<input type="checkbox" name="option" id="option" [(ngModel)]="prop.state" (ngModelChange)="onCheckboxChange()"/> 

在你的类中，有一个类似 的字段atLeastOnePropIsTrue，然后你的onCheckboxChange函数可以如下所示：

<input type="checkbox" name="option" id="option" [(ngModel)]="prop.state" (ngModelChange)="onCheckboxChange()"/> 

它并不完全漂亮，但它会起作用。