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>

虽然这很简单，但我无法弄清楚如何在这组复选框中添加必需的属性。我的意思是，我需要强制用户选择 AT LEAST 其中一个组复选框，否则表单验证将失败。

有什么想法吗？

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

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

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

1 个答案: