目錄

• html文件：
• ts文件：
• 校驗(yàn)文件validators.ts

html文件：

<form [formGroup]="formModel" (submit)="onSubmit()">
  <h2>響應(yīng)式表單與校驗(yàn)</h2>
  <div><label>用戶名:</label><input  type="text" formControlName="username"/></div>
  <div [hidden]="!formModel.hasError("required","username")">用戶名是必填項(xiàng)</div>
  <!-- required不是校驗(yàn)器的名字，而是失敗后返回的對(duì)象里的key值 
  * 只要是required有值就認(rèn)為是錯(cuò)誤的，不論是什么值true或者是對(duì)象
  * username是想要檢查的字段名字
  -->
  <div [hidden]="!formModel.hasError("minlength","username")">用戶名的最小長度是6</div>
  <div><label>手機(jī)號(hào):</label><input  type="text" formControlName="mobile"/></div>
  <div [hidden]="!formModel.hasError("mobile","mobile")">手機(jī)號(hào)不合法</div>
  <div formGroupName="passwordsGroup">
    <div><label>密碼:</label><input  type="password" formControlName="password"/></div>
    <div [hidden]="!formModel.hasError("minlength",["passwordsGroup","password"])">密碼的最小長度是6</div>
    <!-- 這里注意想要校驗(yàn)的字段的寫法是一個(gè)數(shù)組 -->
    <div><label>確認(rèn)密碼:</label><input  type="password" formControlName="pwconfrim"/></div>
    <div [hidden]="!formModel.hasError("equal","passwordsGroup")">
      {{formModel.getError("equal","passwordsGroup")?.descx}}
       <!-- 可以在校驗(yàn)器中的key值中定義提示語 -->
    </div>
  </div>
  <button type="submit">注冊(cè)</button>
</form>
<div>
  {{formModel.status}}
</div>

ts文件：

import { Component,OnInit } from "@angular/core";
import { FormGroup,FormControl,FormBuilder,AbstractControl,Validators } from "@angular/forms";
import { validators } from "./validator/validators";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit{
  //校驗(yàn)器就是一個(gè)普通的方法,名字隨意定，接收一個(gè)參數(shù)，參數(shù)的類型必須是AbstractControl的類型，必須有返回值，返回值的//可以是任意結(jié)果的一個(gè)對(duì)象,對(duì)象要求key必須是string類型的,值可以是任意類型的
  // xxxx(control:AbstractControl):{[key:string]:any} {
  //   return null;
  // }
  //校驗(yàn)器可以單獨(dú)的提取出去，寫在validators.ts文件中
  public val:validators;//定義一個(gè)validators類型的變量 val
  formModel: FormGroup;
  // constructor(){
  //     this.formModel = new FormGroup({
  //       username: new FormControl(),
  //       moblie: new FormControl(),
  //       passwordsGroup: new FormGroup({
  // password: new FormControl(),
  // pwconfrim: new FormControl()
  //       })
  //     });
  // }
  //同上的功能
  //FormBuilder的group方法可以再接收一個(gè)額外的方法來做校驗(yàn),用“，”分開
  //["",,]第一個(gè)元素是一個(gè)初始值，第二個(gè)元素是一個(gè)校驗(yàn)方法，第三個(gè)元素是異步校驗(yàn)方法
  constructor(fb:FormBuilder){
    this.val = new validators();
    this.formModel =fb.group({
      username: ["",[Validators.required,Validators.minLength(6)]],//[""]實(shí)例化了一個(gè)FormControl,Validators內(nèi)置表單校驗(yàn)都存儲(chǔ)在這里
      mobile: ["",this.val.mobileValidator,this.val.mobileAsyncValidator],
      passwordsGroup: fb.group({
password:  ["",Validators.minLength(6)],
pwconfrim:  [""]
      },{validator :this.val.euqalValidator})
    });
}
  onSubmit() { 
    // let isValid: boolean = this.formModel.get("username").valid;
    //符合所有校驗(yàn)規(guī)則后，isValid就是true;
    // console.log("username的校驗(yàn)結(jié)果是"+isValid);
    // let errors:any = this.formModel.get("username").errors;
    // console.log("username的錯(cuò)誤信息是"+JSON.stringify(errors))
    if(this.formModel.valid){ //所有表單都合法才打印表單的值
      console.log(this.formModel.value);
    }
  }
  ngOnInit() {
  }
}

校驗(yàn)文件validators.ts

import { FormControl,FormGroup } from "@angular/forms";
import { Observable } from "rxjs";
export class validators{
? ? mobileValidator(control:FormControl):any {
? ? ? ? let myReg = /^1(3|4|5|7|8)+\d{9}$/;
? ? ? ? let valid = myReg.test(control.value);
? ? ? ? console.log("moblie的校驗(yàn)結(jié)果是"+valid)
? ? ? ? return valid ? null : {mobile:true};//如果valid是true 返回是null
? ? ? }
? ? //異步校驗(yàn)器，返回的不是對(duì)象，而是一個(gè)異步校驗(yàn)流
? ? mobileAsyncValidator(control:FormControl):any {
? ? ? ? let myReg = /^1(3|4|5|7|8)+\d{9}$/;
? ? ? ? let valid = myReg.test(control.value);
? ? ? ? console.log("moblie的校驗(yàn)結(jié)果是"+valid)
? ? ? ? return Observable.of(
? ? ? ? ? ? valid ? null : {mobile:true}
? ? ? ? ).delay(5000)//延遲5秒 ?
? ? ? }
? ? ? euqalValidator(group:FormGroup):any {
? ? ? ? let password :FormControl = group.get("password") as FormControl;
? ? ? ? let pwconfrim :FormControl = group.get("pwconfrim") as FormControl;
? ? ? ? let valid :boolean = (password.value === pwconfrim.value);
? ? ? ? console.log("密碼校驗(yàn)結(jié)果是"+valid);
? ? ? ? return valid ? null : {equal:{descx:"密碼和確認(rèn)密碼不匹配"}};
? ? ? }
}

以上就是angular4響應(yīng)式表單與校驗(yàn)實(shí)現(xiàn)demo的詳細(xì)內(nèi)容，更多關(guān)于angular4響應(yīng)式表單校驗(yàn)的資料請(qǐng)關(guān)注其它相關(guān)文章！