Angular 響應式表單基礎例子

guqiu 發布于2019-08-23 15:22 / 2797人閱讀

摘要：注入服務生成表單控件提供了一個語法糖，以簡化或實例的創建過程。導致在輸入的時候，表單校驗錯誤，卻顯示不了錯誤信息。因此需要再次判斷狀態，只要表單值改變，則為未對表單操作時，點擊提交按鈕時，則模擬表單被，顯示提示信息

1、案例需求

表單提交，表單全部校驗成功才能提交，當表單校驗錯誤，表單邊框變紅，同時有錯誤提示信息，有重置功能

2、代碼分析

在線預覽

git倉庫

本案例中使用了響應式表單，響應式表單在表單的校驗方面非常方便

2.1、注冊 ReactiveFormsModule

要使用響應式表單，就要從 @angular/forms 包中導入 ReactiveFormsModule 并把它添加到你的 NgModule 的 imports 數組中。

app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule
  ]

2.2、使用 FormBuilder 來生成表單控件

當需要與多個表單打交道時，手動創建多個表單控件實例會非常繁瑣。FormBuilder 服務提供了一些便捷方法來生成表單控件。FormBuilder 在幕后也使用同樣的方式來創建和返回這些實例，只是用起來更簡單。

注入 FormBuilder 服務

constructor(
    private fb: FormBuilder
  ) { }

生成表單控件

FormBuilder 提供了一個語法糖，以簡化 FormControl、FormGroup 或 FormArray 實例的創建過程。它會減少構建復雜表單時所需的樣板代碼的數量（new FormControl）。

formGroup: FormGroup;

this.formGroup = this.fb.group({
      name: "",
      age: "",
      sex: ""
    });

2.3、FormGroupDirective

formGroup 是一個輸入指令，它接受一個 formGroup 實例，它會使用這個 formGroup 實例去匹配 FormControl、FormGroup、FormArray 實例，所以模版中的 formControlName 必須和 formGroup 中的 name 匹配。


  
    姓名：
    
      {{nameErrorMessage}}

2.4、表單狀態

每個表單控件都有自己的狀態，共五個狀態屬性，都是布爾值。

valid 表單值是否有效

pristine 表單值是否未改變

dirty 表單值是否已改變

touched 表單是否已被訪問過

untouched 表單是否未被訪問過

以輸入姓名的表單為例，只驗證該表單的必填項時。表單先獲取焦點并且輸入姓名，最后移除焦點，每一步表單的狀態如下：

初始狀態
狀態	值
valid	false
pristine	true
dirty	false
touched	false
untouched	true

輸入狀態
狀態	值
valid	true
pristine	false
dirty	true
touched	false
untouched	true

失去焦點后狀態
狀態	值
valid	true
pristine	false
dirty	true
touched	true
untouched	true

2.5、表單校驗

表單驗證用于驗證用戶的輸入，以確保其完整和正確。Angular內置的了一些校驗器，如 Validators.required， Validators.maxlength，Validators.minlength， Validators.pattern，但是不能自定義錯誤提示信息，所以實用性不強，滿足不了業務場景的需求，于是我們可以自定義表單校驗器。

自定義表單校驗器

name-validator.ts

import { AbstractControl, ValidatorFn } from "@angular/forms";

export function nameValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {

    if (!control.value) {
      return { message: "請輸入必選項" };
    }

    if (control.value.length > 10) {
      return { message: "名稱大于10位了" };
    }

    return null;

  };
}

使用自定義驗證器

app.component.ts

this.formGroup = this.fb.group({
      name: ["", nameValidator()],
      age: ["", ageValidator()],
      sex: ["", sexValidator()]
    });

顯示錯誤提示信息

當頁面初始化的時候不應該顯示錯誤信息，也就是表單touched為true

// Error
private errorMessage(name): string {
    const control = this.formGroup.controls[name];
    return (control.touched && control.invalid) ? control.errors.message : "";
  }

然而touched只有失去焦點才為true，在輸入的時候一直為false。導致在輸入的時候，表單校驗錯誤，卻顯示不了錯誤信息。因此需要再次判斷 dirty 狀態，只要表單值改變，則為false

private errorMessage(name): string {
    const control = this.formGroup.controls[name];
    return ((control.touched || control.dirty) && control.invalid) ? control.errors.message : "";
  }

2.6、markAsTouched

未對表單操作時，點擊提交按鈕時，則模擬表單被touched，顯示提示信息

markFormGroupTouched(formGroup: FormGroup) {
    (Object).values(formGroup.controls).forEach(item => {
      if (item.controls) {
        this.markFormGroupTouched(item);
      } else {
        item.markAsTouched();
      }
    });
  }

云服務器 GPU云服務器響應式響應式布局響應式網站響應式設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101951.html

angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

alogy 2019-08-29 16:54 評論0 收藏0
angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

hzc 2019-08-02 11:40 評論0 收藏0
angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

MycLambert 2019-08-23 12:16 評論0 收藏0
angular4 學習記錄 -- 表單

摘要：在表單上添加的會攔截標準的表單提交事件。并為它們提供了一些共同的行為和屬性，其中有些是可觀察對象。用于跟蹤一個單獨的表單控件的值和有效性狀態。組件中的頂級表單就是一個。在表單所在的中的上添加，再在指定的驗證方法中調用來顯示驗證失敗信息。 angular4 表單模板表單在app.module中導入FormsModule之后，項目中的form表單都會是一個ngForm，也就是一個模板表...

james 2019-08-21 16:45 評論0 收藏0
Angular 響應式表單之表單分組

摘要：跟蹤獨立表單控件的值和驗證狀態。當使用響應式表單時，類是最基本的構造塊。因此在查看單個表單是否有錯誤信息時，必須先判斷是子組件還是孫子組件。方法檢查組內是否有一個具有指定名字的已啟用的控件，存在返回，不存在返回。 1、案例需求表單提交，表單全部校驗成功才能提交，當表單校驗錯誤，表單邊框變紅，同時有錯誤提示信息，有重置功能在線預覽 git倉庫 2、名詞解釋在分析代碼之前，首先明...

huaixiaoz 2019-08-23 15:24 評論0 收藏0