真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

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

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

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

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

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

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 };
}

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 })
});

  
   開啟手機(jī)登錄
   
     
       是
   
   
     
       否
   
  

     手機(jī)號(hào)碼

     
      
      
         
           請(qǐng)輸入手機(jī)號(hào)碼
         
         
           手機(jī)號(hào)碼格式不正確
         
      
     

動(dòng)態(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();
}

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

自定義驗(yàn)證器

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

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

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

新增 number 控件

  年齡

   
     
     
         
           輸入年齡不合法
         
     
   

自定義驗(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)該會(huì)發(fā)現(xiàn)，在 ageValidator 驗(yàn)證器內(nèi)部，我們寫死了年齡的邊界值 (最小值與最大值)。理想的情況下，應(yīng)該能夠讓用戶自行設(shè)定邊界值。因此接下來(lái)，我們來(lái)優(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)證器，接下來(lái)我們來(lái)介紹如何實(shí)現(xiàn) "跨字段驗(yàn)證" 的功能。

跨字段驗(yàn)證

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

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

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

新增 email 控件

確認(rèn)郵箱

   
   
      
        請(qǐng)輸入郵箱地址
      
      
        兩次輸入的郵箱地址不一致
      
   

新增 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 }),
  // ...
});

更新模板

     郵箱
     
      
      
         
           請(qǐng)輸入郵箱地址
         
         
           請(qǐng)輸入有效的郵箱地址
         
      
     
     

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

1. 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" 語(yǔ)法來(lái)綁定內(nèi)嵌的 Form Group。

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

  兩次輸入的郵箱地址不一致

我有話說

怎么會(huì)監(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

模板

組件類

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)證”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!