Angular / ionic：如何使复选框控件无效？

Question

如果复选框未选中，有什么简单的方法可以使 Angular 表单中的复选框控件无效？如果可能的话，我想用 HTML 来做。

这是我现在得到的：

<form (ngSubmit)="onSubmit()" #f="ngForm">

  <!-- ... -->

  <ion-item>
    <ion-label>I accept terms</ion-label>
    <ion-checkbox name="termsAccepted"
                  [(ngModel)]="termsAccepted"
                  required>
    </ion-checkbox>
  </ion-item>
</form>

在这里，required 指令不起作用：一旦您选中复选框，它就被认为永远有效，即使您随后取消选中它（这实际上是 required 指令的正常行为）

我查看了there，但没有找到相关的指令。

我应该纠正自己的指令还是错过了更简单的方法？谢谢。

Answer 1

根据您的评论，您表示如果未选中提交按钮，您希望禁用它。而且您只想使用 HTML 来实现这一点，所以这就是我所拥有的：

<button [disabled]="!f.valid || !termsAccepted">submit</button>

请注意，您可以在模板中使用赋值运算符 && 和 || 将起作用。 （你怎么称呼我可能是错误的）。

这更像是一个hackery，而不是使用它，您可能想要修复您构建表单的方式。您应该阅读ReactiveForms，相信我，这将为您节省很多未来的时间。

更新：checkbox 元素没有required 状态。勾选与否均有效。您可能想要创建一个指令，例如 [mustBeChecked]。

Answer 2

这里的复选框有点棘手。如果要将特定字段设置为无效，则需要进行一些修改。您可以添加一个更改事件，该事件将根据是否检查该字段手动将其设置为无效和有效，比方说一个名为checkIfChecked 的函数。您还需要使用 ViewChild 才能引用您的表单：

import { ViewChild, NgForm } from '@angular/core';

@ViewChild('f') f: NgForm;

checkIfChecked() {
  if (this.termsAccepted == false) {
    this.f.controls.termsAccepted.setErrors({notValid:true});
  }
  else {
    this.f.controls.termsAccepted.setErrors(null);
  }      
}

也许有更漂亮的方法，欢迎提出建议；）

---

不过，如果使用响应式表单，这一切都会变得容易得多，我参考 this answer.，您可以在其中执行以下操作：

this.myForm = builder.group({
    termsAccepted: [false, Validators.pattern('true')]
});