目錄

• html文件：
• ts文件：
• 校驗文件validators.ts

html文件：

<form [formGroup]="formModel" (submit)="onSubmit()">
  <h2>響應式表單與校驗</h2>
  <div><label>用戶名:</label><input  type="text" formControlName="username"/></div>
  <div [hidden]="!formModel.hasError("required","username")">用戶名是必填項</div>
  <!-- required不是校驗器的名字，而是失敗后返回的對象里的key值 
  * 只要是required有值就認為是錯誤的，不論是什么值true或者是對象
  * username是想要檢查的字段名字
  -->
  <div [hidden]="!formModel.hasError("minlength","username")">用戶名的最小長度是6</div>
  <div><label>手機號:</label><input  type="text" formControlName="mobile"/></div>
  <div [hidden]="!formModel.hasError("mobile","mobile")">手機號不合法</div>
  <div formGroupName="passwordsGroup">
    <div><label>密碼:</label><input  type="password" formControlName="password"/></div>
    <div [hidden]="!formModel.hasError("minlength",["passwordsGroup","password"])">密碼的最小長度是6</div>
    <!-- 這里注意想要校驗的字段的寫法是一個數組 -->
    <div><label>確認密碼:</label><input  type="password" formControlName="pwconfrim"/></div>
    <div [hidden]="!formModel.hasError("equal","passwordsGroup")">
      {{formModel.getError("equal","passwordsGroup")?.descx}}
       <!-- 可以在校驗器中的key值中定義提示語 -->
    </div>
  </div>
  <button type="submit">注冊</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{
  //校驗器就是一個普通的方法,名字隨意定，接收一個參數，參數的類型必須是AbstractControl的類型，必須有返回值，返回值的//可以是任意結果的一個對象,對象要求key必須是string類型的,值可以是任意類型的
  // xxxx(control:AbstractControl):{[key:string]:any} {
  //   return null;
  // }
  //校驗器可以單獨的提取出去，寫在validators.ts文件中
  public val:validators;//定義一個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方法可以再接收一個額外的方法來做校驗,用“，”分開
  //["",,]第一個元素是一個初始值，第二個元素是一個校驗方法，第三個元素是異步校驗方法
  constructor(fb:FormBuilder){
    this.val = new validators();
    this.formModel =fb.group({
      username: ["",[Validators.required,Validators.minLength(6)]],//[""]實例化了一個FormControl,Validators內置表單校驗都存儲在這里
      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;
    //符合所有校驗規則后，isValid就是true;
    // console.log("username的校驗結果是"+isValid);
    // let errors:any = this.formModel.get("username").errors;
    // console.log("username的錯誤信息是"+JSON.stringify(errors))
    if(this.formModel.valid){ //所有表單都合法才打印表單的值
      console.log(this.formModel.value);
    }
  }
  ngOnInit() {
  }
}

校驗文件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的校驗結果是"+valid)
? ? ? ? return valid ? null : {mobile:true};//如果valid是true 返回是null
? ? ? }
? ? //異步校驗器，返回的不是對象，而是一個異步校驗流
? ? mobileAsyncValidator(control:FormControl):any {
? ? ? ? let myReg = /^1(3|4|5|7|8)+\d{9}$/;
? ? ? ? let valid = myReg.test(control.value);
? ? ? ? console.log("moblie的校驗結果是"+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("密碼校驗結果是"+valid);
? ? ? ? return valid ? null : {equal:{descx:"密碼和確認密碼不匹配"}};
? ? ? }
}

以上就是angular4響應式表單與校驗實現demo的詳細內容，更多關于angular4響應式表單校驗的資料請關注其它相關文章！