我有3个复选框,如果用户将所有复选框都留空,则我要发出警告,用户必须至少标记一个复选框。
模板
<div *ngFor="let rol of roles">
<mat-checkbox
[checked]="rol.checked"
(change)="onCheckboxChange()">
{{rol.label}}
</mat-checkbox>
</div>
班级
roles = [
{label: 'administrator', checked: false},
{label: 'organizer', checked: false},
{label: 'athlete', checked: false}
];
onCheckboxChange() {
let count = 0;
this.roles.forEach(key => {
if (!key.checked) {
count++;
}
});
if (count === 2) {
console.log('add a rol please');
}
}
我也尝试过这个:
onCheckboxChange() {
let count = 0;
for (const rol of this.roles) {
if (rol.checked === false) {
count++;
}
}
console.log(count);
}
现在,当所有复选框都未选中时,什么也没有发生。我的目标是验证是否至少标记了一个复选框,否则向用户发出警告。另外,告诉用户选择了哪个角色。
答案 0 :(得分:0)
使用您的代码,您需要检查值是否等于3而不是2 。
if (count === 3) {
console.log('add a rol please');
}
使用map
运算符更新功能
let count = 0;
this.roles.map((data) => {
if (data.checked) {
count++;
}
})
if (!count) {
console.log('add a rol please');
}
答案 1 :(得分:0)
问题似乎是您正在检查组件中数组的值,但是当复选框被选中时,您没有代码会更改数组中的值。
尝试使用双向绑定:
<div *ngFor="let rol of roles">
<input type="checkbox"
[(ngModel)]="rol.checked"
(change)="onCheckboxChange()">
{{rol.label}}
</div>
(我将其更改为常规复选框,而不是材料设计,但应以相同的方式工作。)
通过使用[(ngModel)]
(双向绑定),当用户单击复选框时,数组中的基础checked
属性将变为匹配。
您还可以按如下所示简化组件中的代码:
onCheckboxChange() {
// Returns false unless at least one box is checked.
let result = this.roles.map(r => r.checked).some(value => value === true)
if (!result) {
console.log('add a rol please');
}
}
map
操作从对象数组映射到您感兴趣的单个属性(checked
属性)的数组,从而产生布尔值数组。 some
方法测试是否有至少一个元素符合条件。有关some
的更多信息,请参见此:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some