Angular中表單的示例分析

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

Angular 表單

什么是模板式表單

表單的數據模型是通過組件模板中的相關指令來定義的， 因為使用這種方式定義表單的數據模型時， 我們會受限于 HTML 的語法， 所以模板驅動方式只適合用于一些簡單的場景。

什么是響應式表單

響應式表單提供了一種模型驅動的方式來處理表單輸入， 其中的值會隨時間而變化。 使用響應式表單時， 通過編寫 TypeScript 代碼而不是 HTML 代碼來創建一個底層的數據模型， 在這個模型定義好以后， 使用一些特定的指令， 將模板上的 HTML 元素與底層的數據模型連接在一起。
注意：

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

• 響應式表單并不會替你生成 HTML， 模板仍然需要自己來編寫。

• 模板式表單中， 是不能訪問數據模型的相關類的， 只能拿到表單最終的數據； 在響應式表單中， 是可以訪問數據模型相關的類， 但由于它們是不可引用的， 故不能在模板中進行操作， 只能在 TypeScript 代碼中進行操作。

響應式表單

FormGroup

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

FormControl

FormControl 是構成表單的基本單位， 通常情況下用來代表一個 input 元素， 但是也可以用來代表一個更復雜的組件， 如日歷， 下拉選擇框。 FormControl 保存著與其關聯的 HTML 元素的當前值以及元素的校驗狀態， 還有元素是否被修改過等信息。

FormArray

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

表單校驗

Angular 內置校驗器

Angular為我們提供了幾個內置校驗器, 下面是比較常用的校驗器:

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

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

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

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

• Validators.pattern() - 表單控件的值需匹配pattern對應的模式（正則表達式）

自定義響應式表單校驗器

在實際的開發中， 為了滿足項目的需求， 我們需要自定義一些校驗器。 一般情況下， 可以將校驗函數定義成如下形式：

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

下面以常見的注冊頁面為例：

初始化表單

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

編寫校驗器

// 手機號碼校驗
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的校驗結果：', valid); 
   return valid ? null : { mobile: true };
}

// 密碼校驗
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('密碼校驗結果', valid);  
   return valid ? null : { equal: true };
}

Angular 異步校驗器

Angular的表單 API 還支持異步校驗器， 異步校驗器可以調用遠程的服務來檢查表單的字段的值。 異步校驗器與普通校驗器類似， 也是一個方法， 唯一不同的是異步校驗器返回的不是一個對象， 而是一個可觀測的流。

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的校驗結果：', valid); 
   return of(valid ? null : { mobile: true }); 
 }

Angular 狀態字段

• touched 和 untouched

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

• pristine 和 dirty

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

• pending

當一個字段處于異步校驗時， 該字段的 pending 屬性是 true。

自定義模板式表單的校驗器

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

編寫指令

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

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

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

// .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')">
      用戶名是必填項！
    </div>  
    <div [hidden]="!myForm.form.hasError('minlength', 'username')">
      用戶名長度至少是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中表單的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！