微信小程序商家版_angular4中关于表单的校验示例

2021-01-11 13:46

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() {
 // 创建表单元素
 createForm() {
 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页面中使用

 form [formGroup]="myForm" (ngSubmit)="postDate()" 
 div 
 label for="username" 用户名: /label 
 input type="text" placeholder="请输入用户名" id="username" formControlName="username" / 
 /div 
 div 
 label for="mobile" 手机号码: /label 
 input type="text" placeholder="请输入手机号码" id="mobile" formControlName="mobile"/ 
 /div 
 div formGroupName="password" 
 div 
 label 密码: /label 
 input type="password" placeholder="请输入密码" formControlName="pass1" / 
 /div 
 div 
 label 确认密码: /label 
 input type="password" placeholder="请再次输入密码" formControlName="pass2" / 
 /div 
 /div 
 div 
 input type="submit" value="提交" [disabled]="!myForm.valid" / 
 /div 
 /form 

二、使用表单校验数据

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、页面显示错误

 div 
 label for="username" 用户名: /label 
 input type="text" placeholder="请输入用户名" id="username" formControlName="username" / 
 !-- 当输入框没有访问的时候或者合法的时候不显示 -- 
 div [hidden]="myForm.get('username').valid || myForm.get('username').untouched" 
 p [hidden]="!myForm.hasError('required','username')" 用户名必填的 /p 
 p [hidden]="!myForm.hasError('minlength','username')" 用户名长度过短 /p 
 p [hidden]="!myForm.hasError('maxlength','username')" 用户名长度太长 /p 
 /div 
 /div 
 div 
 label for="mobile" 手机号码: /label 
 input type="text" placeholder="请输入手机号码" id="mobile" formControlName="mobile"/ 
 div [hidden]="myForm.get('mobile').valid || myForm.get('mobile').untouched" 
 p [hidden]="!myForm.hasError('mobile', 'mobile')" {{myForm.getError('mobile', 'mobile') .info}} /p 
 /div 
 /div 
 div formGroupName="password" 
 div 
 label 密码: /label 
 input type="password" placeholder="请输入密码" formControlName="pass1" / 
 /div 
 div 
 label 确认密码: /label 
 input type="password" placeholder="请再次输入密码" formControlName="pass2" / 
 /div 
 !-- 对于group可以不在外面加一层判断 -- 
 div 
 p [hidden]="!myForm.hasError('passValidator','password')" 
 {{myForm.getError('passValidator','password') .info}}
 /div 
 /div 

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;
 color:#f00;

五、自定义class显示错误

1、在input输入框上写上

表示该字段无效且触碰过就添加这个 >

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。