取消选中Angular 2 ngModelChange事件中的复选框

Question

我们在Angular 2应用程序中有一个表单。表单有一个复选框。在某些情况下，选中该复选框是非法的。当用户选中该复选框时，我们要显示错误消息并取消选中该复选框。

这几乎可行。在我们的事件处理程序中，我们检查条件，警告用户并将checkbox变量设置为false。不幸的是，复选框仍然处于检查状态。

我们已经看到的事件顺序如下：

1. 用户点击复选框。
2. 我们的checkbox变量变为真。
3. 我们的事件处理程序被调用。
4. 显示警报（暂时使用alert）
5. 警报被驳回
我们的代码将
6. checkbox变量设置为false。
7. 我们的事件处理程序已完成。

8. 在浏览器中选中了复选框

   模型（checkbox）仍为false，但用户没有看到它。如何在实际检查之后取消选中复选框（而不是'即将被检查'）？

   这是Plunkr demonstrating the issue。

Answer 1

原始答案：

使用this.checkbox=false

包裹您的setTimeout

@Component({
  selector: 'my-app',
  template: `
    <label>
        <input type='checkbox' [(ngModel)]='checkbox' (ngModelChange)='onCheckboxChange()'>    Can't be checked
    </label>
    <pre>{{checkbox}}</pre>
  `,
})
export class App {
  name:string;
  checkbox: boolean;
  constructor() {
    this.checkbox = false;
  }

  onCheckboxChange() {
    if (this.checkbox) {
      setTimeout(()=>{
        this.checkbox = false;
      })
    }
  }
}

plunkr

对于未来的读者：

您可以找到有关此问题可能需要setTimeout的原因的解释：

Angular 2 - Checkbox not kept in sync

Answer 2

你需要分享一些代码，但根据描述问题似乎是用ngModel取消选中复选框这样使用

<input type="checkbox" [checked]="your condition">