Validation 表单验证无法使用离子2中的Angular 2 FormBuilder
我正在构建一个Ionic 2(typescript)应用程序。在复选框(ion复选框标记)中的简单模型驱动表单验证中只有问题 我正在使用FormBuilder构建表单模块。我希望表单根据复选框输入控件的选中状态进行验证/未验证。但它只能单向工作。这是我的密码: reg.htmlValidation 表单验证无法使用离子2中的Angular 2 FormBuilder,validation,angular,ionic2,angular2-forms,angular2-formbuilder,Validation,Angular,Ionic2,Angular2 Forms,Angular2 Formbuilder,我正在构建一个Ionic 2(typescript)应用程序。在复选框(ion复选框标记)中的简单模型驱动表单验证中只有问题 我正在使用FormBuilder构建表单模块。我希望表单根据复选框输入控件的选中状态进行验证/未验证。但它只能单向工作。这是我的密码: reg.html <ion-content padding> <form class="client_profile" [formGroup]="regForm"> <div clas
<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>
实际视图:
选中/取消选中“条款和条件”复选框不会更新验证逻辑,“下一步”按钮禁用状态不会更新。这是因为表单验证没有考虑此复选框。非常感谢您的帮助。用
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);
});
切换“术语”复选框不会导致任何日志记录。这可能是个bug
现在将控件的初始值更改为false
,然后重试:terms:[false,Validators.required]
这一次将进行日志记录,您可以看到发生了什么
不幸的是,现在控件一加载就处于有效状态。在构建FormGroup之后,您可以使用类似的日志记录来检查这一点。最好的解决方案是创建一个is true自定义验证器,但一个快速而肮脏的解决方案是更改您的按钮:
[disabled]="!regForm.valid || !form.controls.terms.touched"
[disabled]="!regForm.valid || !form.controls.terms.touched"