快捷導(dǎo)航

Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證

更新時(shí)間：2019年08月11日 09:48:24 作者：娜一抹驚鴻

這篇文章主要給大家介紹了關(guān)于Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Angular8具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

一、前提

必要性：特別必要
意義：很有意義

二、正文

（一）、新建表單（模板表單）

1、新建名稱為formValidator的ng項(xiàng)目——命令行輸入ng new formValidator；

2、修改pakage.json文件——添加參數(shù)，方便開發(fā)，命令行輸入npm start啟動項(xiàng)目；

"scripts": {
 "ng": "ng",
 "start": "ng serve --open --port 4210",//修改端口號&自動打開默認(rèn)瀏覽器窗口
 "build": "ng build",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
 },

3、新建組件，命令行輸入ng g c templateForm --spec false；

4、將app.components.html中的內(nèi)容，替換成<app-template-form></app-template-form>

5、在app.module.ts中引入FormModul并在import中使用；

6、書寫formValidator組件

 //template-form.html
 <div class="container">
  <form (ngSubmit)="save()" #myForm="ngForm">
  <input 
   type="text" 
   [(ngModel)]="name" //雙向數(shù)據(jù)綁定
   name="name" //使用form時(shí)必須定義，可以理解為當(dāng)前控件的名字
   #myName="ngModel" //檢查當(dāng)前控件狀態(tài)的出口，應(yīng)用：myName.valid、myName.errors等
   autocomplete="off" //關(guān)閉瀏覽器自帶的顯示歷史記錄 h5新屬性
   [appVerifyName]="nameList" //添加驗(yàn)證器
  >
  <!--invalid是否驗(yàn)證成功-->
  <!--dirty是否改變-->
  <!--touched是否被撫摸過-->
  <div *ngIf="myName.invalid && (myName.dirty || myName.touched)">
   <div *ngIf="myName.errors.required">
    名稱為必填項(xiàng)
   </div>
   <div *ngIf="myName.errors.repeat">
    名稱重復(fù)
   </div> 
  </div>
  <button type="submit" [disabled]="!myForm.form.valid">提交</button> //驗(yàn)證通過才能提交 
  </form>
 </div>

  //template-form.ts
  ...
  
  name: string;
  
  nameAry:string[] = ['zhangsan','lisi','wangwu'];
  
  constructor() { }

  ngOnInit() {}
  
  save(): void{
    console.log('save 發(fā)請求')
  }
  ...

（二）、驗(yàn)證表單

1、新建指令，用于驗(yàn)證ng g c d share/verifyName

2、在share目錄下新建nameValidator.ts，用于書寫驗(yàn)證函數(shù)

  //share/nameValidator.ts
  
  import { ValidatorFn, AbstractControl } from "@angular/forms";

  export function nameValidator(nameList: string[]): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
      //依據(jù)指令中傳遞進(jìn)來的名稱列表進(jìn)行判斷，如果包含，就返回一個對象，對象的key將
      //作為模板（template-form.html）中被驗(yàn)證的控件的erros的key，如果不包含返回null
      //表示驗(yàn)證通過
      return nameList.includes(control.value) ? { 'repeat': { value: control.value } } : null;
    };
  }

3、書寫指令——驗(yàn)證名稱不能重復(fù)

  //verify-name.directive.ts
  
  import { Directive, Input } from '@angular/core';
  import { Validator, NG_VALIDATORS, AbstractControl } from '@angular/forms';
  import { nameValidator } from './nameValidator';
  
  @Directive({
   selector: '[appVerifyName]',
   providers: [{
    provide: NG_VALIDATORS,
    useExisting: VerifyNameDirective,
    multi: true
   }]
  })
  export class VerifyNameDirective implements Validator { //實(shí)現(xiàn)Validator接口
  
   @Input('appVerifyName') //接收驗(yàn)證規(guī)則（reg）,或者你希望傳到指令中的什么
   nameList: string[];
  
   validate(control: AbstractControl): { [key: string]: any } | null {
    return this.name ? nameValidator(nameList)(control) : null
   }
  }

三、碎碎念

如果只有一個表單或者項(xiàng)目比較小巧，用這樣的驗(yàn)證機(jī)制，我認(rèn)為是不太明智的（用ng都沒必要），隨便弄個計(jì)數(shù)器或者標(biāo)識位就能達(dá)到dirty和touched的效果，反之，大概率上沒有一個項(xiàng)目有一萬個表單控件，定義9000個驗(yàn)證規(guī)則的，所以可以高度復(fù)用，而且維護(hù)起來也靈活一些

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: