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 class="form-group"><label for="username">用户名:label><input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" />div><div class="form-group"><label for="mobile">手机号码:label><input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/>div><div formGroupName="password" style="border:none;"><div class="form-group"><label>密码:label><input type="password" class="form-control" placeholder="请输入密码" formControlName="pass1" />div><div class="form-group"><label>确认密码:label><input type="password" class="form-control" placeholder="请再次输入密码" formControlName="pass2" />div>div><div class="form-group"><input type="submit" value="提交" class="btn btn-warning" [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 class="form-group"><label for="username">用户名:label><input type="text" placeholder="请输入用户名" class="form-control" 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 class="form-group"><label for="mobile">手机号码:label><input type="text" placeholder="请输入手机号码" class="form-control" 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" style="border:none;"><div class="form-group"><label>密码:label><input type="password" class="form-control" placeholder="请输入密码" formControlName="pass1" />div><div class="form-group"><label>确认密码:label><input type="password" class="form-control" placeholder="请再次输入密码" formControlName="pass2" />div><div><p [hidden]="!myForm.hasError('passValidator','password')">{{myForm.getError('passValidator','password')?.info}}p>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;
  }
  p{color:#f00;
  }

五、自定义class显示错误

• 1、在input输入框上写上

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！