1. 将表单的方法移动到单独的ts文件夹中
2. code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
export function mobileValidator(control: FormControl): any { const myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
const valid = myreg.test(control.value);
console.log('mobile result: ' + valid);
return valid ? null : {mobile: true};
}export function equalValidator(group: FormGroup): any { const password: FormControl = group.get('password') as FormControl;
const pconfirm: FormControl = group.get('pconfirm') as FormControl;
const valid: boolean = password.value === pconfirm.value;
console.log('password equal: ' + valid);
return valid ? null : {equal: {descerr: '密码和确认密码不匹配'}};
} |
3. html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<form [formGroup]="formModel" (submit)="submit()">
<div>
用户名：<input type="text" formControlName="username">
<div [hidden]="!formModel.hasError('required','username')">
用户名是必填项
</div>
<div [hidden]="!formModel.hasError('minlength','username')">
用户名是最小长度为6
</div>
电话：<input type="text" formControlName="mobile">
<div [hidden]="!formModel.hasError('mobile','mobile')">
请输入正确的手机号
</div>
<div formGroupName="passwordsGroup">
密码：<input type="password" formControlName="password">
确认密码：<input type="password" formControlName="pconfirm">
<div [hidden]="!formModel.hasError('minlength',['passwordsGroup', 'password'])">
密码最小长度为6
</div>
<div [hidden]="!formModel.hasError('equal','passwordsGroup')">
{{formModel.getError('equal','passwordsGroup')?.descerr}}
</div>
</div>
</div>
<div><button type="submit">保存</button></div>
</form>
|
4. 控制器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
formModel: FormGroup;constructor(private http: Http, fb: FormBuilder) { this.formModel = fb.group({
username: ['', [Validators.required, Validators.minLength(6)]],
mobile: ['', mobileValidator],
passwordsGroup: fb.group({
password: ['', Validators.minLength(6)],
pconfirm: ['']
}, { validator: equalValidator} ),
});
}submit() { const isValid: boolean = this.formModel.get('username').valid;
console.log('username: ' + isValid);
const errors: any = this.formModel.get('username').errors;
console.log('username errors' + JSON.stringify(errors));
if ( this.formModel.valid) {
console.log(this.formModel.value);
}
} |
5. 状态字段
本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/p/7345651.html，如需转载请自行联系原作者