Angular 如何避免复选框被选中？

Question

单击复选框时，我会显示一个带有两个按钮的模式，接受和不接受。只有在选中接受按钮时才应选中该复选框。

出于测试目的，我尝试创建此复选框

<input type="checkbox" (change)="foo()" [checked]="false">

期望它执行我的组件的 foo 方法，但从未被检查过。问题是它被检查了！我来自 React 背景，这非常令人沮丧。

知道我做错了什么吗？

我也试过了

<input type="checkbox" name="show_recurrency" (change)="foo()" [(ngModel)]="checkout.recurrency" id="show_recurrency" />

        foo(e) {
          e.preventDefault();
          console.error('foooooooooooooooo', e);
          this.checkout.recurrency = false;
          return;
        }

此致，

Answer 1

您可以给它分配一个 [(ngModel)]，然后在 foo() 中强制它返回 false。

Answer 2

您可以处理 click 事件：

<input type="checkbox" (click)="foo($event)" [checked]="false">

并调用 event.preventDefault() 以阻止更改：

foo(event) {
  event.preventDefault();
  console.log("foo was called");
}

有关演示，请参阅 this stackblitz。

Angular 如何避免复选框被选中？

Angular how to avoid a checkbox from being checked?

angular

angular-forms

angular-template