角度2の反応性のあるフォームIonicのチェックボックスの有効性

Question

角度フォームを使用して電子メール、パスワード、および条件&のチェックボックスを使って簡単なフォームを作成しています。 私の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> 

とシンプルな角度成分：

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

あなたが書いた問題についても遭遇しました。あなたの別のバインドブール変数がある場合

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

：HTMLで

private policyButtonValue: boolean; 

：私は、コントロールレジスタ（）

`でフォーム要求を受信した後、いくつかのカスタムの回避策のロジックを記述することをお勧めまだチェックされていない場合は、エラー処理を自分で実装することができます。

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