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

问题描述：

我正在使用Angular Forms制作带有电子邮件，密码和复选框的条款&我的Ionic应用程序中的条件。我的HTML：Ionic中的Angular 2反应形式复选框验证

<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>

和一个简单的角度分量：

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

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

答

我管理使用上的复选框自定义验证解决问题的手段：

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

现在复选框正常工作。

答

我也遇到了你写的问题。

private policyButtonValue: boolean;

在html

：：

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

如果单独的绑定布尔变量是我建议在控制接收表单请求在`寄存器（）

后写一些定制的解决方法的逻辑仍然没有检查，你可以自己实现错误处理。

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

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

相关推荐