具有必需属性的 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 属性。我的意思是，我需要强制用户 select AT LEAST 组复选框之一，否则表单验证将失败。

有什么想法吗？

Answer 1

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

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

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

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

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

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

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

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

angular2 group of checkboxes with required attribute

checkbox

angular2-forms

angular