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

Question

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

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

它不是很漂亮，但它会起作用。