表單驗證不適用於Ionic 2中的Angular 2 FormBuilder

我正在構建Ionic 2（typescript）應用程序。在複選框（ion-checkbox tag）中進行了簡單的模型驅動表單驗證後，發現問題僅限。表單驗證不適用於Ionic 2中的Angular 2 FormBuilder

我正在使用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-_][email protected][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'按鈕的禁用狀態不會更新。它的表單驗證沒有考慮這個複選框。一些幫助表示讚賞。

來源

2016-09-28 somnathbm

初始化您的terms控制與null似乎打破變化事件的發射。嘗試添加此訂閱：

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"

來源

2016-10-14 11:56:50

表單驗證不適用於Ionic 2中的Angular 2 FormBuilder

回答

相關問題