二、使用表單校驗(yàn)數(shù)據(jù)

1、angular中自帶了三個(gè)常見的表單校驗(yàn)的是在Validators中的required,minLength,maxLength
2、自定義表單校驗(yàn)器(其實(shí)就一個(gè)函數(shù),函數(shù)的參數(shù)是當(dāng)前需要校驗(yàn)的行,返回一個(gè)任意對(duì)象)

**格式**
export function fnName(control:FormControl|FormGroup):any{

}

3、響應(yīng)式表單字段中可以寫三個(gè)值,第一個(gè)是返顯到頁面上的,第二個(gè)參數(shù)是校驗(yàn)器(可以是一組),第三個(gè)參數(shù)異步校驗(yàn)(常見判斷手機(jī)號(hào)碼,用戶名是否重復(fù)注冊(cè))

三、自定義一個(gè)校驗(yàn)方法的步驟

1、把項(xiàng)目中需要用的校驗(yàn)器單獨(dú)寫一個(gè)文件

import { FormControl, FormGroup } from '@angular/forms';
/**
 * 自定義驗(yàn)證器(其實(shí)就是一個(gè)函數(shù),一個(gè)返回任意對(duì)象的函數(shù))
 * 傳遞的參數(shù)是當(dāng)前需要驗(yàn)證的表單的FormControl
 * 通過傳遞的參數(shù)獲取當(dāng)前表單輸入的值
 */
export function mobileValidator(control: FormControl): any {
  console.dir(control);
  // 獲取到輸入框的值
  const val = control.value;
  // 手機(jī)號(hào)碼正則
  const mobieReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  const result = mobieReg.test(val);
  return result ? null : { mobile: { info: '手機(jī)號(hào)碼格式不正確' } };
}

2、使用自己定義的校驗(yàn)器

createForm() {
  this.myForm = this.fb.group({
    username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],
    mobile: ['', [Validators.required, mobileValidator]],
    password: this.fb.group({
      pass1: [''],
      pass2: ['']
    })
  });
}

3、定義一個(gè)密碼組的校驗(yàn)

// 定義一個(gè)密碼組的驗(yàn)證方法
export function passValidator(controlGroup: FormGroup): any {
  // 獲取密碼輸入框的值
  const pass1 = controlGroup.get('pass1').value as FormControl;
  const pass2 = controlGroup.get('pass2').value as FormControl;
  console.log('你輸入的值:', pass1, pass2);
  const isEqule: boolean = (pass1 === pass2);
  return isEqule ? null : { passValidator: { info: '兩次密碼不一致' } };
}

4、使用

createForm() {
  this.myForm = this.fb.group({
    username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],
    mobile: ['', [Validators.required, mobileValidator]],
    password: this.fb.group({
      pass1: [''],
      pass2: ['']
    }, {validator: passValidator})
  });
}

四、關(guān)于前端頁面中錯(cuò)誤的顯示

1、頁面顯示錯(cuò)誤

  用戶名:
  
  
  
    用戶名必填的

    用戶名長(zhǎng)度過短

    用戶名長(zhǎng)度太長(zhǎng)

  


  手機(jī)號(hào)碼:
  
  
    {{myForm.getError('mobile', 'mobile')?.info}}

  


  
    密碼:
    
  
  
    確認(rèn)密碼:
    
  
  
  

    
      {{myForm.getError('passValidator','password')?.info}}
    

  

2、定義樣式文件

.ng-touched:not(form),.ng-invalid:not(form) {
  border: 1px solid #f00;
}

.ng-valid:not(form),.ng-untouched:not(form) {
  border: 1px solid #ddd;
}
p{
  color:#f00;
}

五、自定義class顯示錯(cuò)誤

1、在input輸入框上寫上

表示該字段無效且觸碰過就添加這個(gè)class=”error”

 [class.error]="myForm.get('username').invalid && myForm.get('username').touched"

感謝各位的閱讀！關(guān)于“angular4中關(guān)于表單校驗(yàn)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！