Angular Ionic 中的 2 个反应式表单复选框验证

Question

我正在使用 Angular 表单制作一个简单的表单，其中包含电子邮件、密码和我的 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
    });
  }
}

我的复选框验证有问题，它没有像我假设的那样工作。现在我可以提交没有复选框的表单。我只需要使其成为必需的 - 与其他已经有效的表单值相同，我该怎么做？

Answer 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;
}
}

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

Answer 2

TL;DR
Use Validators.requiredTrue for checkbox formControls or to handle any boolean values

解释：
还有另一个名为 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

Answer 3

04-06-2020： 离子 5+ 和 Angular 9+

这对我有用。即 Validators.requiredTrue

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

Angular Ionic 中的 2 个反应式表单复选框验证

Angular 2 reactive forms checkbox validation in Ionic

typescript

ionic-framework

angular

angular-reactive-forms