Angular如何實(shí)現(xiàn)ReactiveForm表單驗(yàn)證-創(chuàng)新互聯(lián)

這篇文章主要介紹了Angular如何實(shí)現(xiàn)Reactive Form表單驗(yàn)證，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、長安網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為長安等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

基礎(chǔ)知識

內(nèi)建驗(yàn)證規(guī)則

Angular 提供了一些內(nèi)建的 validators，我們可以在 Template-Driven 或 Reactive 表單中使用它們。

目前 Angular 支持的內(nèi)建 validators 如下：

required - 設(shè)置表單控件值是非空的。
email - 設(shè)置表單控件值的格式是 email。
minlength - 設(shè)置表單控件值的最小長度。
maxlength - 設(shè)置表單控件值的大長度。
pattern - 設(shè)置表單控件的值需匹配 pattern 對應(yīng)的模式。

示例

this.signupForm = this.fb.group({
 userName: ['', [Validators.required, Validators.minLength(3)]],
 email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+_]+@[a-z0-9.-]+')]]
});

動態(tài)調(diào)整驗(yàn)證規(guī)則

myControl.setValidators(Validators.required);
myControl.setValidators([Validators.required, Validators.maxLength(6)]);

myControl.clearValidators();
myControl.updateValueAndValidity();

自定義驗(yàn)證器

function myCustomValidator(c: AbstractControl): 
 {[key: string]: boolean} | null {
 if(somethingIsWrong) {
  return { 'myvalidator': true};
 }
 return null;
}

自定義驗(yàn)證器 (支持參數(shù))

function myCustomValidator(param: any): ValidatorFn {
 return (c: AbstractControl): {[key: string]: boolean} | null {
  if(somethingIsWrong) {
   return { 'myvalidator': true};
  }
   return null;
 }
}

跨字段驗(yàn)證

emailMatcher

function emailMatcher(c: AbstractControl) {
 let emailControl = c.get('email');
 let confirmControl = c.get('confirmEmail');

 if (emailControl.pristine || confirmControl.pristine) {
  return null;
 }

 return emailControl.value === confirmControl.value ? null : { 'match': true };
}

emailGroup

ngOnInit(): void {
 this.signupForm = this.fb.group({
  userName: ['', [Validators.required, Validators.minLength(6)]],
  emailGroup: this.fb.group({
   email: ['', [Validators.required, Validators.email]],
   confirmEmail: ['', [Validators.required]],
  }, { validator: emailMatcher })
});

在介紹表單驗(yàn)證前，我們來看一下目前頁面的顯示效果：

Angular如何實(shí)現(xiàn)Reactive Form表單驗(yàn)證

表單驗(yàn)證

表單的內(nèi)建驗(yàn)證規(guī)則，前面章節(jié)已經(jīng)介紹過了，接下來我們來介紹在表單中如何 "動態(tài)調(diào)整驗(yàn)證規(guī)則" 。

動態(tài)調(diào)整驗(yàn)證規(guī)則

為了演示 "動態(tài)調(diào)整驗(yàn)證規(guī)則" 的功能，我新增了兩個控件：

radio - 用于讓用戶設(shè)置是否開啟手機(jī)登錄。
tel - 當(dāng)用戶開啟手機(jī)登錄功能，用于讓用戶輸入手機(jī)號碼。

當(dāng)用戶開啟手機(jī)登錄功能，手機(jī)號碼對應(yīng)控件的驗(yàn)證規(guī)則，必須是必填且格式為合法的手機(jī)號碼。當(dāng)用戶不開啟手機(jī)登錄功能時(shí)，手機(jī)號碼對應(yīng)控件將不是必填的。

新增 radio 控件

<div class="form-group">
  <div class="col-md-offset-1 col-md-8 checkbox">
   開啟手機(jī)登錄
   <label>
     <input type="radio" value="1"
      formControlName="enableMobile">
       是
   </label>
   <label>
     <input type="radio" value="0"
      formControlName="enableMobile">
       否
   </label>
  </div>
</div>

新增 tel 控件

<div class="form-group"
  [ngClass]="{'has-error': (mobile.touched || mobile.dirty) && !mobile.valid }">
     <label class="col-md-2 control-label"
         for="mobileId">手機(jī)號碼</label>

     <div class="col-md-8">
      <input class="form-control"
          id="mobileId"
          type="text"
          placeholder="請輸入手機(jī)號碼"
          formControlName="mobile"/>
      <span class="help-block" *ngIf="(mobile.touched || mobile.dirty) 
        && mobile.errors">
         <span *ngIf="mobile.errors.required">
           請輸入手機(jī)號碼
         </span>
         <span *ngIf="mobile.errors.minlength">
           手機(jī)號碼格式不正確
         </span>
      </span>
     </div>
</div>

動態(tài)調(diào)整驗(yàn)證規(guī)則功能

ngOnInit(): void {
  ...
  this.signupForm.get('enableMobile').valueChanges
   .subscribe(value => this.checkMobile(value));
}

checkMobile(enableMobile: string): void {
 const mobileControl = this.signupForm.get('mobile');
 
 enableMobile === "1" ? 
   mobileControl.setValidators([Validators.required,
    Validators.pattern('1(3|4|5|7|8)\\d{9}')]) :
   mobileControl.clearValidators();
 
  mobileControl.updateValueAndValidity();
}

介紹完如何動態(tài)調(diào)整驗(yàn)證規(guī)則，接下來我們來介紹如何 "自定義驗(yàn)證器"。

自定義驗(yàn)證器

為了演示 "自定義驗(yàn)證器" 的功能，我新增了一個控件：

number - 用于讓用戶設(shè)置是年齡信息。

當(dāng)讓用戶手動輸入年齡信息時(shí)，我們需要設(shè)置一個有效的年齡范圍，比如 (18 - 120)。此時(shí)我們就需要通過自定義驗(yàn)證器來實(shí)現(xiàn)上述功能。

新增 number 控件

<div class="form-group"
  [ngClass]="{'has-error': (age.touched || age.dirty) && !age.valid }">
  <label class="col-md-2 control-label"
   for="ageId">年齡</label>

   <div class="col-md-8">
     <input class="form-control"
         id="ageId"
         type="number"
         placeholder="請輸入年齡"
         formControlName="age"/>
     <span class="help-block" *ngIf="(age.touched || age.dirty) && age.errors">
         <span *ngIf="age.errors.range">
           輸入年齡不合法
         </span>
     </span>
   </div>
</div>

自定義驗(yàn)證器模板

function myCustomValidator(c: AbstractControl): 
 {[key: string]: boolean} | null {
 if(somethingIsWrong) {
  return { 'myvalidator': true};
 }
 return null;
}

新增 ageValidator 驗(yàn)證器

function ageValidator(c: AbstractControl): { [key: string]: any } | null {
 let age = c.value;
 if (age && (isNaN(age) || age < 20 || age > 120)) {
  return { 'range': true, min: 20, max: 120 };
 }
 return null;
}

使用 ageValidator 驗(yàn)證器

ngOnInit(): void {
 this.signupForm = this.fb.group({
  // ...
  age: ['', ageValidator]
 });
}

我們的 ageValidator 自定義驗(yàn)證器，雖然已經(jīng)實(shí)現(xiàn)了。細(xì)心的讀者應(yīng)該會發(fā)現(xiàn)，在 ageValidator 驗(yàn)證器內(nèi)部，我們寫死了年齡的邊界值 (最小值與大值)。理想的情況下，應(yīng)該能夠讓用戶自行設(shè)定邊界值。因此接下來，我們來優(yōu)化一下 ageValidator 驗(yàn)證器。

自定義驗(yàn)證器 (支持參數(shù))

自定義驗(yàn)證器模板 (支持參數(shù))

function myCustomValidator(param: any): ValidatorFn {
 return (c: AbstractControl): {[key: string]: boolean} | null {
  if(somethingIsWrong) {
   return { 'myvalidator': true};
  }
   return null;
 }
}

新增 ageRange 驗(yàn)證器工廠

function ageRange(min: number, max: number): ValidatorFn {
 return (c: AbstractControl): { [key: string]: any } | null => {
  let age = c.value;
  if (age && (isNaN(age) || age < min || age > max)) {
   return { 'range': true, min: min, max: max };
  }
  return null;
 }
}

使用 ageRange 驗(yàn)證器工廠

ngOnInit(): void {
 this.signupForm = this.fb.group({
  // ...
  age: ['', ageRange(20, 120)]
 });
}

介紹完如何自定義驗(yàn)證器，接下來我們來介紹如何實(shí)現(xiàn) "跨字段驗(yàn)證" 的功能。

跨字段驗(yàn)證

在日常生活中，在注冊表單中，經(jīng)常要讓用戶再次輸入同樣的字段值，比如登錄密碼或郵箱地址的值。針對這種場景，我們就需要驗(yàn)證兩個控件的輸入值是否一致，這時(shí)我們就要引入跨字段驗(yàn)證的功能。

為了演示 "跨字段驗(yàn)證" 的功能，我新增了一個控件：

email - 用于讓用戶確認(rèn)輸入的郵箱地址

新增 email 控件

<label class="col-md-2 control-label"
    for="emailId">確認(rèn)郵箱</label>
<div class="col-md-8">
   <input class="form-control"
      id="confirmEmailId"
      type="email"
      placeholder="請?jiān)俅屋斎豚]箱地址"
      formControlName="confirmEmail"/>
   <span class="help-block" *ngIf="(confirmEmail.touched || 
      confirmEmail.dirty)">
      <span *ngIf="confirmEmail.errors?.required">
        請輸入郵箱地址
      </span>
      <span *ngIf="!confirmEmail.errors?.required && 
        emailGroup.errors?.match">
        兩次輸入的郵箱地址不一致
      </span>
   </span>
</div>

新增 emailMatcher

function emailMatcher(c: AbstractControl) {
 let emailControl = c.get('email');
 let confirmControl = c.get('confirmEmail');
 if (emailControl.pristine || confirmControl.pristine) {
  return null;
 }
 return emailControl.value === confirmControl.value ? null : { 'match': true };
}

新增 emailGroup

ngOnInit(): void {
 this.signupForm = this.fb.group({
  userName: ['', [Validators.required, Validators.minLength(6)]],
  emailGroup: this.fb.group({
   email: ['', [Validators.required, Validators.email]],
   confirmEmail: ['', [Validators.required]],
  }, { validator: emailMatcher }),
  // ...
});

更新模板

<div class="form-group"
   formGroupName="emailGroup"
   [ngClass]="{'has-error': emailGroup.errors }">
     <label class="col-md-2 control-label"
         for="emailId">郵箱</label>
     <div class="col-md-8">
      <input class="form-control"
          id="emailId"
          type="email"
          placeholder="請輸入郵箱地址"
          formControlName="email"/>
      <span class="help-block" *ngIf="(email.touched || email.dirty) &&
         email.errors">
         <span *ngIf="email.errors.required">
           請輸入郵箱地址
         </span>
         <span *ngIf="!email.errors.required && email.errors.email">
           請輸入有效的郵箱地址
         </span>
      </span>
     </div>
     <!--其余部分：請參考"新增email控件"的內(nèi)容-->
</div>

上面代碼中，有以下幾個問題需要注意：

Form Group 是可以嵌套使用的。

this.signupForm = this.fb.group({
  userName: ['', [Validators.required, Validators.minLength(6)]],
  emailGroup: this.fb.group({
   email: ['', [Validators.required, Validators.email]],
   confirmEmail: ['', [Validators.required]],
}, { validator: emailMatcher })

我們通過 formGroupName="groupName" 語法來綁定內(nèi)嵌的 Form Group。

<div class="form-group" formGroupName="emailGroup"
  [ngClass]="{'has-error': emailGroup.errors }">

郵箱不匹配的信息是存在 emailGroup 對象的 errors 屬性中，而不是存在 confirmEmail 對象的 errors 屬性中。

<span *ngIf="!confirmEmail.errors?.required && emailGroup.errors?.match">
  兩次輸入的郵箱地址不一致
</span>

我有話說

怎么會監(jiān)聽表單值的變化？

Reactive Form

export class AppComponent {
 constructor(private fb: FormBuilder) {
  this.form = fb.group({
   name: 'semlinker',
   age: 31
  });

  this.form.valueChanges.subscribe(data => {
   console.log('Form changes', data)
  });
 }
}

Template-driven Form

模板

<form #myForm="ngForm" (ngSubmit)="onSubmit()">
 <input type="text"
  name="name" 
  class="form-control" 
  required   
  [(ngModel)]="user.name">
 <input type="number" 
   name="age" 
   class="form-control" 
   required 
  [(ngModel)]="user.age">
</form>

組件類

class AppComponent implements AfterViewInit {
 @ViewChild('myForm') form;

 ngAfterViewInit() {
  this.form.control.valueChanges
   .debounceTime(500)
   .subscribe(values => this.doSomething(values));
 }
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Angular如何實(shí)現(xiàn)Reactive Form表單驗(yàn)證”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站欄目：Angular如何實(shí)現(xiàn)ReactiveForm表單驗(yàn)證-創(chuàng)新互聯(lián)
分享路徑：http://www.muchs.cn/article24/dodice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)頁設(shè)計(jì)公司、企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作、品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容