表单验证不适用于 Ionic 2 中的 Angular 2 FormBuilder
Posted
技术标签:
【中文标题】表单验证不适用于 Ionic 2 中的 Angular 2 FormBuilder【英文标题】:Form validation is not working with Angular 2 FormBuilder in Ionic 2 【发布时间】:2017-02-05 23:45:01 【问题描述】:我正在构建一个 Ionic 2(打字稿)应用程序。在复选框(ion-checkbox 标记)中的简单模型驱动表单验证中遇到问题ONLY。
我正在使用 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”按钮的禁用状态不会更新。这是因为表单验证没有考虑这个复选框。感谢您的帮助。
【问题讨论】:
【参考方案1】:使用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 后使用类似的日志记录来检查。最好的解决方案是创建一个 is-true 自定义验证器,但一个快速而肮脏的解决方案是更改您的按钮:
[disabled]="!regForm.valid || !form.controls.terms.touched"
【讨论】:
以上是关于表单验证不适用于 Ionic 2 中的 Angular 2 FormBuilder的主要内容,如果未能解决你的问题,请参考以下文章
表单验证适用于 2 个字段,但不适用于第 3 个字段 - 是啥破坏了验证检查
JQuery Validate 不适用于 Bootstrap Carousel 中的表单