angular4中关于表单的校验示例

angular4中关于表单的校验示例

本章中介绍响应式表单的创建及表单输入值的校验,对于模板表单就略过。

一、使用响应式表单的步骤

1、在模块(一般是app.module.ts)中引入ReactiveFormsModule

2、在组件的ts文件中使用响应式表单

import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

export class ReactiveFormComponent implements OnInit {

private myForm: FormGroup;

constructor(private fb: FormBuilder) {

this.createForm();

}

ngOnInit() {

}

// 创建表单元素

createForhttp://m() {

this.myForm = this.fb.group({

username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],

mobile: ['', [Validators.required]],

password: this.fb.group({

pass1: [''],

pass2: ['']

})

});

}

// 提交表单函数

postDate() {

/**

* valid:是否有效

* invalid:无效

* dirty:脏

* status:状态

* errors:显示错误

*/

if(this.myForm.valid){

console.log(this.myForm.value);

}

}

}

3、在组件的html页面中使用

用户名:

手机号码:

密码:

确认密码:

二、使用表单校验数据

1、angular中自带了三个常见的表单校验的是在Validators中的required,minLength,maxLength

2、自定义表单校验器(其实就一个函数,函数的参数是当前需要校验的行,返回一个任意对象)

**格式**

export function fnName(control:FormControl|FormGroup):any{

}

3、响应式表单字段中可以写三个值,第一个是返显到页面上的,第二个参数是校验器(可以是一组),第三个参数异步校验(常见判断手机号码,用户名是否重复注册)

三、自定义一个校验方法的步骤

1、把项目中需要用的校验器单独写一个文件

import { FormControl, FormGroup } from '@angular/forms';

/**

* 自定义验证器(其实就是一个函数,一个返回任意对象的函数)

* 传递的参数是当前需要验证的表单的FormControl

* 通过传递的参数获取当前表单输入的值

*/

export function mobileValidator(control: FormControl): any {

console.dir(control);

// 获取到输入框的值

const val = control.value;

// 手机号码正则

const mobieReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;

const result = mobieReg.test(val);

return result ? null : { mobile: { info: '手机号码格式不正确' } };

}

2、使用自己定义的校验器

createForm() {

this.myForm = this.fb.group({

username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],

mobile: ['', [Validators.required, mobileValidator]],

password: this.fb.group({

pass1: [''],

pass2: ['']

})

});

}

3、定义一个密码组的校验

// 定义一个密码组的验证方法

export function passValidator(controlGroup: FormGroup): any {

// 获取密码输入框的值

const pass1 = controlGroup.get('pass1').value as FormControl;

const pass2 = controlGroup.get('pass2').value as FormControl;

console.log('你输入的值:', pass1, pass2);

const isEqule: boolean = (pass1 === pass2);

return isEqule ? null : { passValidator: { info: '两次密码不一致' } };

}

4、使用

createForm() {

this.myForm = this.fb.group({

username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],

mobile: ['', [Validators.required, mobileValidator]],

password: this.fb.group({

pass1: [''],

pass2: ['']

}, {validator: passValidator})

});

}

四、关于前端页面中错误的显示

1、页面显示错误

用户名:

用户名必填的

用户名长度过短

用户名长度太长

手机号码:

{{myForm.getError('mobile', 'mobile')?.info}}

密码:

确认密码:

{{myForm.getError('passValidator','password')?.info}}

2、定义样式文件

.ng-touched:not(form),.ng-invalid:not(form) {

border: 1px solid #f00;

}

.ng-valid:not(form),.ng-untouched:not(form) {

border: 1px solid #ddd;

}

p{

color:#f00;

}

五、自定义class显示错误

1、在input输入框上写上

表示该字段无效且触碰过就添加这个class=”error”

[class.error]="myForm.get('username').invalid && myForm.get('username').touched"

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。