我有一个表单验证工作,但更新后Ionic不起作用。这是我的代码:
form.html
<ion-header>
<ion-navbar>
<ion-title>
Authorization Form Demo
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="home" padding>
<form [ngFormModel]="authForm" (ngSubmit)="onSubmit(authForm.value)">
<ion-item [class.error]="!username.valid && username.touched">
<ion-label floating>Username</ion-label>
<ion-input type="text" value="" [ngFormControl]="username"></ion-input>
</ion-item>
<div *ngIf="username.hasError('required') && username.touched"
class="error-box">* Username is required!</div>
<div *ngIf="username.hasError('minlength') && username.touched"
class="error-box">* Minimum username length is 8!</div>
<div *ngIf="username.hasError('checkFirstCharacterValidator') && username.touched"
class="error-box">* Username cant't start with number!</div>
<ion-item [class.error]="!password.valid && password.touched">
<ion-label floating>Password</ion-label>
<ion-input type="text" value="" [ngFormControl]="password" ></ion-input>
</ion-item>
<div *ngIf="password.hasError('required') && password.touched"
class="error-box">* Password is required</div>
<div *ngIf="password.hasError('minlength') && password.touched"
class="error-box">* Minimum password length is 8!</div>
<div *ngIf="password.hasError('checkFirstCharacterValidator') && password.touched"
class="error-box">* Password cant't start with number!</div>
<br/><br/>
<button type="submit" class="custom-button" [disabled]="!authForm.valid" block>Submit</button>
</form>
</ion-content>
form.ts
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl} from '@angular/common';
import {CustomValidators} from '../validators/CustomValidators';
@Component({
templateUrl: 'build/pages/form/form.html',
directives: [FORM_DIRECTIVES]
})
export class FormPage {
authForm: ControlGroup;
username: AbstractControl;
password: AbstractControl;
constructor(private navController: NavController, private fb: FormBuilder) {
this.authForm = fb.group({
'username': ['', Validators.compose([Validators.required, Validators.minLength(8), CustomValidators.checkFirstCharacterValidator])],
'password': ['', Validators.compose([Validators.required, Validators.minLength(8), CustomValidators.checkFirstCharacterValidator])]
});
this.username = this.authForm.controls['username'];
this.password = this.authForm.controls['password'];
}
onSubmit(value: string): void {
if(this.authForm.valid) {
console.log('Submitted value: ', value);
}
}
}
CustomValidators.ts
import { Control, ControlGroup } from "@angular/common";
interface ValidationResult {
[key: string]: boolean;
}
export class CustomValidators {
public static checkFirstCharacterValidator(control: Control): ValidationResult {
var valid = /^\d/.test(control.value);
if (valid) {
return {checkFirstCharacterValidator: true};
}
return null;
}
}
有人知道我需要做些什么改变才能正常工作? 提前谢谢。
最好的问候。
答案 0 :(得分:0)
Ionic2的Beta11在表单处理方面做了重大改变,你可以阅读更多here。
form.ts
编辑两行,如下所示:
import {FORM_DIRECTIVES, FormBuilder, FormGroup, Validators, AbstractControl} from '@angular/forms';
authForm: FormGroup;
您需要从@angular/forms
导入新表单组件,而不是已弃用的@angular/common
,并将已弃用的ControlGroup
更改为FormGroup
在form.html
编辑一行:
<form [formGroup]="authForm" (ngSubmit)="onSubmit(authForm.value)" novalidate>
将已弃用的ngFormModel
更改为formGroup
,并考虑在表单中添加novalidate
属性。
要使自定义验证程序正常工作,您还必须更改CustomValidators.ts
中的两行,但我没有时间阅读所有更改,之前从未使用自定义验证程序。所以这可能需要更多的工作
import { FormControl, FormGroup } from "@angular/forms";
public static checkFirstCharacterValidator(control: FormControl): ValidationResult {