[英]Form validation is not working with Angular 2 FormBuilder in Ionic 2
我正在構建一個Ionic 2(打字稿)應用程序。 僅在復選框( ion-checkbox標簽)中的簡單模型驅動表單驗證中出現問題。
我正在使用FormBuilder來構建表單模塊。 我希望根據復選框輸入控件的選中狀態驗證/不驗證表單。 但它的單向工作。 這是我的代碼:
reg.html
<ion-content padding>
<form class="client_profile" [formGroup]="regForm">
<div class="profile_pic" id="profile_pix">
<img src="build/images/home.svg" id="client_camera_pic" />
</div>
<ion-item>
<ion-label floating>What we would call you?</ion-label>
<ion-input type="text" formControlName="client_name"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Choose your username</ion-label>
<ion-input type="text" name="client_username" value="" #client_username formControlName="client_username"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Where we will drop your Email?</ion-label>
<ion-input type="email" name="client_email" value="" #client_email formControlName="client_email"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>We also need your phone number</ion-label>
<ion-input type="number" name="client_phone" value="" #client_phone formControlName="client_phone"></ion-input>
</ion-item>
<ion-item class="reg_terms">
<ion-checkbox secondary #terms name="terms" value="" checked="false" formControlName="terms"></ion-checkbox>
<ion-label>I accept the <a href="#">Terms & Conditions</a></ion-label>
</ion-item>
</form>
<div>
<ion-buttons right class="client_reg_done">
<button danger class="reg_complete" (click)="process_client_reg()" [disabled]="!regForm.valid">NEXT</button>
</ion-buttons>
</div>
</ion-content>
reg.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { FORM_PROVIDERS, FormBuilder, FormControl, FormGroup, AbstractControl, Validators, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { App, NavController, ViewController, ModalController, LoadingController, LoadingOptions } from 'ionic-angular';
@Component({
templateUrl: "build/pages/registration/reg.html"
})
export class Registration {
ngAfterViewInit(){
}
regForm: FormGroup;
constructor(public app: App, public nav: NavController, public viewCtrl: ViewController, public elem: ElementRef, public modalCtrl: ModalController, public loading: LoadingController, public fb: FormBuilder){
}
ngOnInit() {
this.regForm = this.fb.group({
client_name: ['', Validators.compose([Validators.required, Validators.maxLength(30), Validators.pattern('^[a-zA-Z\. ]+$')])],
client_username: ['', Validators.compose([Validators.required, Validators.maxLength(20), Validators.pattern('[a-zA-Z0-9-_\.]+')])],
client_email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9-_]+@[a-zA-Z]+\.[a-zA-Z]{2,4}$')])],
client_phone: ['', Validators.compose([Validators.required, Validators.pattern('^[\+0-9]{10,12}$')])],
terms: [null, Validators.required]
});
}
}
實際觀點:
選中/取消選中條款和條件復選框不會更新驗證邏輯,並且'NEXT'按鈕禁用狀態不會更新。 這是因為表單驗證不考慮此復選框。 一些幫助表示贊賞。
用null
初始化你的terms
控制似乎打破了變化事件的發射。 嘗試添加此訂閱:
this.regForm.valueChanges.subscribe(v => {
console.log('Required validation failed: ' + this.form.controls['terms'].hasError('required'));
console.log('Required validation touched: ' + this.form.controls['terms'].touched);
console.log('Required validation status: ' + this.form.controls['terms'].status);
});
切換術語復選框不會導致任何記錄。 這可能是一個錯誤。
現在將您的控件更改為初始化為false
並再次嘗試: terms: [false, Validators.required]
這次記錄發生,您可以看到發生了什么。
不幸的是,現在控件一加載就處於有效狀態。 構建FormGroup后,可以使用類似的日志記錄檢查。 最好的解決方案是創建一個真正的自定義驗證器,但快速而骯臟的解決方案是更改按鈕:
[disabled]="!regForm.valid || !form.controls.terms.touched"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.