国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術文章
文章詳情頁

angular4響應式表單與校驗實現demo

瀏覽:213日期:2022-06-10 09:34:41
目錄
  • 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響應式表單校驗的資料請關注其它相關文章!

標簽: JavaScript
主站蜘蛛池模板: 国产成人mv在线观看入口视频 | 欧美日韩国产亚洲一区二区 | 欧美一区二区三区不卡免费 | 国产成人精品实拍在线 | 92国产福利久久青青草原 | 天堂在线视频网站 | 久久久国产精品福利免费 | 国产亚洲高清不卡在线观看 | 亚洲精品久久久久中文字幕一区 | 欧美视频在线观 | 久久免费福利 | 午夜无遮挡怕怕怕免费视频 | 亚洲精品日韩一区二区 | 日本三级一区 | 欧美人禽杂交狂配毛片 | 在线a毛片免费视频观看 | 偷偷操不一样的久久 | 欧美亚洲国产日韩一区二区三区 | 国产精品久久久久久久久久直 | 成人国产午夜在线视频 | 欧美日韩一区二区三区在线观看 | 亚洲专区一 | 成年人视频在线免费播放 | 国产精品欧美激情在线播放 | 男人的天堂欧美精品色偷偷 | 毛色毛片免费看 | 欧洲一级片| 久久精品国产精品亚洲 | 欧美日韩精品一区二区三区视频在线 | 999久久久精品视频在线观看 | 欧美成人免费全部色播 | 亚洲在线视频免费 | 国产成人在线免费视频 | 日p免费视频 | 中文字幕乱码系列免费 | 国产精品1区2区3区在线播放 | 人人草97 | 狠狠综合久久久久综合 | 网站免费满18成年在线观看 | 免费一区二区 | 欧美aav|