快捷導(dǎo)航

Angular8 簡(jiǎn)單表單驗(yàn)證的實(shí)現(xiàn)示例

更新時(shí)間：2020年06月03日 08:32:25 作者：何棄療

這篇文章主要介紹了Angular8 簡(jiǎn)單表單驗(yàn)證的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

簡(jiǎn)單表單校驗(yàn)

傻瓜式校驗(yàn)

直接復(fù)制Antd中demo

<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
 <nz-form-item>
  <nz-form-control nzErrorTip="Please input your username!">
   <nz-input-group nzPrefixIcon="user">
    <input formControlName="userName" nz-input placeholder="Username" />
   </nz-input-group>
  </nz-form-control>
 </nz-form-item>
 <nz-form-item>
  <nz-form-control nzErrorTip="Please input your Password!">
   <nz-input-group nzPrefixIcon="lock">
    <input formControlName="password" nz-input type="password" placeholder="Password" />
   </nz-input-group>
  </nz-form-control>
 </nz-form-item>
 <nz-form-item>
  <nz-form-control>
   <button nz-button nzType="primary" [disabled]="!validateForm.valid">Log in</button>
  </nz-form-control>
 </nz-form-item>
</form>

validateForm!: FormGroup;

 submitForm(): void {
  for (const i in this.validateForm.controls) {
   this.validateForm.controls[i].markAsDirty();
   this.validateForm.controls[i].updateValueAndValidity();
  }
 }

 constructor(private fb: FormBuilder) {}

 ngOnInit(): void {
  this.validateForm = this.fb.group({
   userName: [null, [Validators.required]],
   password: [null, [Validators.required]],
   remember: [true]
  });
 }

此類表單校驗(yàn)較為單一，或者要求比較低，通常即為required校驗(yàn)，錯(cuò)誤信息提示也多為固定不變。

智能化校驗(yàn)

表單一旦開(kāi)始有具體的細(xì)節(jié)校驗(yàn)或者復(fù)雜的業(yè)務(wù)參雜，校驗(yàn)提示必須準(zhǔn)確、清晰。
userName為例，除了為必填項(xiàng)，必然需要符合某種格式，亦或是指定郵箱格式等，那么校驗(yàn)必須同時(shí)反映出錯(cuò)誤類型，本例假設(shè)用戶名有長(zhǎng)度要求進(jìn)行演示。

<nz-form-control [nzErrorTip]="getErrTipByField('userName')">
   <nz-input-group nzPrefixIcon="user">
    <input formControlName="userName" nz-input placeholder="Username" />
   </nz-input-group>
  </nz-form-control>

export class SimpleFormComponent implements OnInit {
 validateForm: FormGroup;
 errMessageMap = {};

 constructor(
  private fb: FormBuilder
 ) { }

 ngOnInit() {
  this.errMessageMap = {
   userName: {
    required: 'please input your name!',
    minlength: 'please input at least least 5 character'
   },
   password: {
    required: 'please input your password!'
   }
  };
  this.validateForm = this.fb.group({
   userName: [null, [Validators.required, Validators.minLength(5)]],
   password: [null, [Validators.required]],
   remember: [true]
  }, { updateOn: 'change' });
 }
 submitForm(): void {
  if (this.validateForm.controls) {
   for (const i in this.validateForm.controls) {
    if (this.validateForm.controls[i]) {
     this.validateForm.controls[i].markAsDirty();
     this.validateForm.controls[i].updateValueAndValidity();
    }
   }
  }
 }
 getErrTipByField(fieldName) {
  const errors = this.validateForm.get(fieldName).errors;
  let errMsg = '';
  for (const key in errors) {
   if (errors.hasOwnProperty(key)) {
    errMsg += this.errMessageMap[fieldName][key];
   }
  }
  return errMsg;
 }

}

構(gòu)建出一個(gè)數(shù)據(jù)對(duì)象，以滿足不同字段下不同錯(cuò)誤類型的錯(cuò)誤提示，根據(jù)業(yè)務(wù)需求，決定是否顯示全部錯(cuò)誤信息或者按照業(yè)務(wù)優(yōu)先級(jí)顯示。

其它細(xì)節(jié)

表單校驗(yàn)時(shí)機(jī)可以設(shè)置，默認(rèn)為change,可選blur 、submit

表單驗(yàn)證正確的，想要提示勾號(hào)可以添加屬性 nzHasFeedback

submit中那段代碼是重新對(duì)表單進(jìn)行驗(yàn)證了，一般驗(yàn)證中是不需要的，動(dòng)態(tài)表單驗(yàn)證后續(xù)結(jié)合自定義表單服務(wù)進(jìn)行演示。

到此這篇關(guān)于Angular8 簡(jiǎn)單表單驗(yàn)證的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Angular8 表單驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: