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>

虽然这很简单，但我不知道如何将 required 属性添加到这组复选框。我的意思是，我需要强制用户选择至少其中一个组复选框，否则表单验证将失败。

有什么想法吗？

Answer 1

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

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

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

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

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

function onCheckboxChange() {
    this.atLeastOnePropIsTrue = this.properties.find(a => a.state === true) != null;
}

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