Angular中表單的示例分析

這篇文章主要介紹Angular中表單的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

Angular 表單

什么是模板式表單

表單的數(shù)據(jù)模型是通過組件模板中的相關(guān)指令來定義的， 因?yàn)槭褂眠@種方式定義表單的數(shù)據(jù)模型時(shí)， 我們會(huì)受限于 HTML 的語法， 所以模板驅(qū)動(dòng)方式只適合用于一些簡(jiǎn)單的場(chǎng)景。

什么是響應(yīng)式表單

響應(yīng)式表單提供了一種模型驅(qū)動(dòng)的方式來處理表單輸入， 其中的值會(huì)隨時(shí)間而變化。 使用響應(yīng)式表單時(shí)， 通過編寫 TypeScript 代碼而不是 HTML 代碼來創(chuàng)建一個(gè)底層的數(shù)據(jù)模型， 在這個(gè)模型定義好以后， 使用一些特定的指令， 將模板上的 HTML 元素與底層的數(shù)據(jù)模型連接在一起。
注意：

• 數(shù)據(jù)模型并不是一個(gè)任意的對(duì)象， 它是一個(gè)由 angular/forms 模塊中的一些特定的類， 如 FormControl， FormGroup， FormArray 等組成的。 在模板式表單中， 是不能直接訪問到這些類的。

• 響應(yīng)式表單并不會(huì)替你生成 HTML， 模板仍然需要自己來編寫。

• 模板式表單中， 是不能訪問數(shù)據(jù)模型的相關(guān)類的， 只能拿到表單最終的數(shù)據(jù)； 在響應(yīng)式表單中， 是可以訪問數(shù)據(jù)模型相關(guān)的類， 但由于它們是不可引用的， 故不能在模板中進(jìn)行操作， 只能在 TypeScript 代碼中進(jìn)行操作。

響應(yīng)式表單

FormGroup

FormGroup 既可以代表表單的一部分， 又可以代表整個(gè)表單， 它是多個(gè) FormControl 的集合。 FormGroup 將多個(gè) FormControl 的值和狀態(tài)聚合在一起， 在表單校驗(yàn)中， 如果FormGroup 中有一個(gè) FormControl 是無效的， 那整個(gè) FormGroup 都是無效的。

FormControl

FormControl 是構(gòu)成表單的基本單位， 通常情況下用來代表一個(gè) input 元素， 但是也可以用來代表一個(gè)更復(fù)雜的組件， 如日歷， 下拉選擇框。 FormControl 保存著與其關(guān)聯(lián)的 HTML 元素的當(dāng)前值以及元素的校驗(yàn)狀態(tài)， 還有元素是否被修改過等信息。

FormArray

FormArray 與 FormGroup 類似， 但是它有長(zhǎng)度屬性。 一般來說， FormGroup 用來代表整個(gè)表單或者表單字段的一個(gè)固定子集； 而 FormArray 通常用來代表一個(gè)可以增長(zhǎng)的字段集合。

表單校驗(yàn)

Angular 內(nèi)置校驗(yàn)器

Angular為我們提供了幾個(gè)內(nèi)置校驗(yàn)器, 下面是比較常用的校驗(yàn)器:

• Validators.required - 表單控件值非空

• Validators.email - 表單控件值的格式是 email

• Validators.minLength() - 表單控件值的最小長(zhǎng)度

• Validators.maxLength() - 表單控件值的最大長(zhǎng)度

• Validators.pattern() - 表單控件的值需匹配pattern對(duì)應(yīng)的模式（正則表達(dá)式）

自定義響應(yīng)式表單校驗(yàn)器

在實(shí)際的開發(fā)中， 為了滿足項(xiàng)目的需求， 我們需要自定義一些校驗(yàn)器。 一般情況下， 可以將校驗(yàn)函數(shù)定義成如下形式：

xxxxValidator(control: AbstarctControl): {[key: string]: any} {    
      // TODO 編寫校驗(yàn)規(guī)則   
      return null;  
 }

下面以常見的注冊(cè)頁面為例：

初始化表單

ngOnInit(): void {  
     this.formModel = this.fb.group({    
	username: ['', [Validators.required, Validators.minLength(6)]],    
	// 密碼    
	passwordsGroup: this.fb.group({     
	       password: [''],  
	       passwordConfirm: [''] 
	       }, { validator: this.equalValidator }),    
        // 手機(jī)號(hào)    
        mobile: ['', this.moblieValidator]  });
 }

編寫校驗(yàn)器

// 手機(jī)號(hào)碼校驗(yàn)
moblieValidator(control: AbstractControl): any {  
   const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8}$/;  
   const valid = reg.test(control.value);  
   console.log('mobile的校驗(yàn)結(jié)果：', valid); 
   return valid ? null : { mobile: true };
}

// 密碼校驗(yàn)
equalValidator(group: FormGroup): any {  
   const password = group.get('password') as FormControl;  
   const passwordConfirm = group.get('passwordConfirm') as FormControl;  
   const valid = password.value === passwordConfirm.value;  
   console.log('密碼校驗(yàn)結(jié)果', valid);  
   return valid ? null : { equal: true };
}

Angular 異步校驗(yàn)器

Angular的表單 API 還支持異步校驗(yàn)器， 異步校驗(yàn)器可以調(diào)用遠(yuǎn)程的服務(wù)來檢查表單的字段的值。 異步校驗(yàn)器與普通校驗(yàn)器類似， 也是一個(gè)方法， 唯一不同的是異步校驗(yàn)器返回的不是一個(gè)對(duì)象， 而是一個(gè)可觀測(cè)的流。

moblieAsyncValidator(control: AbstractControl): Observable<any> {  
   const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8}$/;  
   const valid = reg.test(control.value);  
   console.log('mobile的校驗(yàn)結(jié)果：', valid); 
   return of(valid ? null : { mobile: true }); 
 }

Angular 狀態(tài)字段

• touched 和 untouched

這兩個(gè)字段表示用戶是否訪問過字段， 也就是這個(gè)字段是否獲得焦點(diǎn)。 一般用于表單錯(cuò)誤提示信息是否顯示。 同時(shí)， 如果有任何一個(gè)字段是 touched， 那整個(gè)表單的 touched 屬性就是 true； 只有所有字段是 untouched 時(shí)， 整個(gè)表單的 untouched 屬性才是 true。

• pristine 和 dirty

如果一個(gè)字段的值從來沒有改變過， 那么它的 pristine 就是 true， dirty 就是 false； 反之， 如果字段的值被修改過， 那么它的pristine 就是 false， dirty 就是 true。 同時(shí)， 如果任何一個(gè)字段是 dirty， 那么整個(gè)表單的 dirty 屬性就是 true； 只有所有字段是 pristine 時(shí)， 整個(gè)表單的 pristine 屬性才是 true。

• pending

當(dāng)一個(gè)字段處于異步校驗(yàn)時(shí)， 該字段的 pending 屬性是 true。

自定義模板式表單的校驗(yàn)器

在響應(yīng)式表單里， 我們后臺(tái)有一個(gè)編碼的數(shù)據(jù)模型， 只需要將校驗(yàn)器的方法掛在指定字段屬性上就可以了。 但是， 在模板式表單里， 后臺(tái)是沒有這類數(shù)據(jù)模型的， 指令才是唯一能用的東西， 所以我們需要將校驗(yàn)方法包裝成指令， 然后才能在模板中使用它。

編寫指令

@Directive({  
   selector: '[mobile]', 
    providers: [{provide: NG_VALIDATORS, useValue: moblieValidator, multi: true}]})
 export class MobileValidatorDirective {  
    constructor() { }
 }
 
// html中引用
<div>  手機(jī)號(hào):<input ngModel type="number" name="mobile" mobile required></div>

mutli: true ：指的是在 NG_VALIDATORS 這個(gè) Token 下可以掛不同 useValue 屬性所表示的值。

注意: 在模板式表單中， 是不可以在模板中使用字段的狀態(tài)屬性的。 模板式表單與響應(yīng)式表單不同， 它的模型的值和它狀態(tài)的變更是異步的， 而且很難控制。
如果想要使用字段的狀態(tài)屬性，我們可以進(jìn)行如下操作：

// .html文件中
<div>  
   用戶名:<input ngModel type="text" minlength="6" name="username" (input)="onUsernameInput(myForm)" required>
</div>
<div [hidden]="usernameValid || usernameUntouched">  
    <div [hidden]="!myForm.form.hasError('required', 'username')">
      用戶名是必填項(xiàng)！
    </div>  
    <div [hidden]="!myForm.form.hasError('minlength', 'username')">
      用戶名長(zhǎng)度至少是6位！
    </div>
</div>
// .ts文件中
usernameValid = true; 
usernameUntouched = true; 
onUsernameInput(form: NgForm): void {  
   if (form) {
      this.usernameValid = form.form.get('username').valid;    
      console.log('valid', this.usernameValid);          
      this.usernameUntouched = form.form.get('username').untouched;   
      console.log('untouched',   this.usernameUntouched);
    }
}

以上是“Angular中表單的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！