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、把项目中需要用的校验器单独写一个文件