Question

我正在使用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
    });
  }
}

我遇到了复选框验证问题，但我认为不应该这样做。现在我可以提交没有复选框的表单。我只需要使它成为必需的 - 与已经有效的其他表格值相同，我该怎么做？

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

我也遇到过你所写的问题。我建议在`register（）

中收到表单请求后编写一些自定义的解决方法逻辑

在控件中：

 private policyButtonValue: boolean;

在html中：

<input type="checkbox" [(ngModel)]="policyButtonValue">

如果仍未检查单独的绑定布尔变量，则可以自行实现错误处理。

private register(values: RegisterCredentials) {
        if(!policyButtonValue){
                ... error stuff here
        }
        if (this.form.valid) {
           ...
        }
}

Answer 3

还有另一个名为Validators.requiredTrue的验证器在复选框上使用它而不仅仅是Validators.required而rest是相同的。

感谢撰写此how to validate checkbox fields in reactive forms

的人

Answer 4

2020年6月6日：离子5+和Angular 9 +

这对我有用。即Validators.requiredTrue

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

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

4 个答案: