Ionic中的Angular 2反应形式复选框验证答案

【问题标题】：Angular 2 reactive forms checkbox validation in IonicIonic中的Angular 2反应形式复选框验证
【发布时间】：2020-06-05 19:24:25
【问题描述】：

我正在使用 Angular Forms 制作一个简单的表单，其中包含电子邮件、密码和 Ionic 应用程序中的条款和条件复选框。我的 HTML：

<form [formGroup]="registerForm" (ngSubmit)="register()" class="center">
  <ion-item  class="input-field">
    <ion-input type="email" formControlName="email" placeholder="Email"></ion-input>
  </ion-item>
  <ion-item class="input-field">
    <ion-input type="password" formControlName="password" placeholder="Password" ></ion-input>
  </ion-item>
  <ion-item no-lines>
    <ion-checkbox formControllName="termsAndConditions"></ion-checkbox>
    <ion-label>Terms and Conditions</ion-label>
  </ion-item>
  <button ion-button full type="submit" [disabled]="!registerForm.valid">Register</button>
</form>

还有一个简单的 Angular 组件：

export class RegisterComponent {
  registerForm: FormGroup;
  email = new FormControl('', [Validators.required, Validators.email]);
  password = new FormControl('', [Validators.required]);
  termsAndConditions = new FormControl('', [Validators.required]);

  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      email: this.email,
      password: this.password,
      termsAndConditions: this.termsAndConditions
    });
  }
}

我的复选框验证有问题，我认为它不能正常工作。现在我可以在没有复选框的情况下提交表单。我只需要使其成为必需 - 与其他已经起作用的表单值相同，我该怎么做？

【问题讨论】：

标签： angular typescript ionic-framework angular-reactive-forms

【解决方案1】：

我设法在复选框上使用自定义验证器解决了问题：

export class RegisterComponent {

  registerForm: FormGroup;
  email = new FormControl('', [Validators.required]);
  password = new FormControl('', [Validators.required]);
  termsAndConditions = new FormControl(undefined, [Validators.required]);

  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      'email': this.email,
      'password': this.password,
      'termsAndConditions': this.termsAndConditions
    }, {validator: this.checkCheckbox });
  }
  public checkCheckbox(c: AbstractControl){
  if(c.get('termsAndConditions').value == false){
    return false;
  }else return true;
}
}

现在复选框可以正常工作了。

【讨论】：

【解决方案2】：

TL;DR
Validators.requiredTrue 用于复选框表单控件或处理任何布尔值

说明：
还有另一个名为Validators.requiredTrue 的验证器应该在复选框formControls 上使用，而不仅仅是Validators.required，其余的都是一样的。 在你的构造函数中这样使用它（另外，这样，就不需要在构造函数之外初始化formControls）

    this.registerForm = new FormGroup({
       email: new FormControl('', [Validators.required, Validators.email]);
       password: new FormControl('', [Validators.required]);
       termsAndConditions : new FormControl('', Validators.requiredTrue)
    });

感谢写这篇文章的人how to validate checkbox fields in reactive forms

【讨论】：

这应该是被接受的答案，因为当前接受的答案只是将表单标记为“无效”，而不将复选框本身标记为“无效”。您的答案将正确处理，并且似乎是 Angular 希望我们使用验证器的方式。

【解决方案3】：

2020 年 4 月 6 日： Ionic 5+ 和 Angular 9+

这对我有用。即Validators.requiredTrue

  initForm(): void {
    this.form = this.formBuilder.group({
      parcelSize: [false, Validators.requiredTrue],
    });
  }

【讨论】：