国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Angular 響應式表單之表單分組

huaixiaoz / 2489人閱讀

摘要：跟蹤獨立表單控件的值和驗證狀態。當使用響應式表單時，類是最基本的構造塊。因此在查看單個表單是否有錯誤信息時，必須先判斷是子組件還是孫子組件。方法檢查組內是否有一個具有指定名字的已啟用的控件，存在返回，不存在返回。

1、案例需求

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

在線預覽

git倉庫

2、名詞解釋

在分析代碼之前，首先明確 FormControl、formControl、formControlName、FormGroup、formGroup、formGroupName、FormArray、formArray、formArrayName 都是什么意思以及它們的用法。

2.1、FormControl

FormControl：跟蹤獨立表單控件的值和驗證狀態。它和 FormGroup 和 FormArray 是 Angular 表單的三大基本構造塊之一。它擴展了 AbstractControl 類，并實現了關于訪問值、驗證狀態、用戶交互和事件的大部分基本功能。

當使用響應式表單時，FormControl 類是最基本的構造塊。要注冊單個的表單控件，在組件中導入 FormControl 類，并創建一個 FormControl 的新實例，把它保存在類的某個屬性中。

export class AppComponent implements OnInit {
    const control = new FormControl("", Validators.required);
    console.log(control.value);      // ""
    console.log(control.status);     // "INVALID"
}

在組件類中創建了控件之后，還要把它和模板中的一個表單控件關聯起來，為表單控件添加 formControl 綁定。

formControl：是一個輸入指令，接受 FormControl 的實例，在模版中使用。

formControlName: 也是輸入指令，但是它接受的是一個字符串，同 formGroup 指令配合使用。


  
  
  
  



//等同于
2.2、FormGroup

FormGroup：跟蹤一組 FormControl 實例的值和有效性狀態

FormGroup 把每個子 FormControl 的值聚合進一個對象，它的 key 是每個控件的名字。它通過歸集其子控件的狀態值來計算出自己的狀態。如果組中的任何一個控件是無效的，那么整個組就是無效的。

2.3、FormArray

FormArray：跟蹤一個控件數組的值和有效性狀態

FormArray 聚合了數組中每個表單控件的值。它會根據其所有子控件的狀態總結出自己的狀態。如果 FromArray 中的任何一個控件是無效的，那么整個數組也會變成無效的。

FormControl、FormGroup、FormArray 類 用法一致

formControl、formGroup、formArray 輸入指令 值為對應類的實例 用法一致

formControlName、formGroupName、formArrayName 輸入指令 值為字符串 用法一直

3、代碼分析

fromGroup 可以然我們對表單內容進行分組，方便我們在語義上區分不同類型的輸入，本例中，地址細分為“省”、“市”、“區”。

this.formGroup = this.fb.group({
      name: ["", nameValidator()],
      age: ["", ageValidator()],
      sex: ["", sexValidator()],
      address: this.fb.group({
        province: ["", requiredValidator("請輸入省")],
        city: ["", requiredValidator("請輸入市")],
        district: ["", requiredValidator("請輸入區")]
      })
    });

address 此時不是 fromControl 而是 formGroup。


    
    

      

    

      
      
      
{{errorMessage("city")}}

    

    

      
      
      
{{errorMessage("district")}}

在獲取 省市區的 formControl 時，可以通過這樣獲取

// 太復雜了
this.formGroup.controls["address"].controls["province"];

// 同樣復雜
this.formGroup.get("address").controls["province"];

// 還好
this.formGroup.get(["address", "province"]);

第三種方式雖然簡單，但是不夠完美，get方法不能一步到位，必須同時傳入 formGroupName 和 formControlName。因此在查看單個表單是否有錯誤信息時，必須先判斷 formControlName 是子組件還是孫子組件。

errorMessage(formControlName: string): string {

    let control: AbstractControl;

    if (this.formGroup.contains(formControlName)) {
      control = this.formGroup.get(formControlName);
    } else {
      control = this.formGroup.get(["address", formControlName]);
    }
    return ((control.touched || control.dirty) && control.invalid) ? control.errors.message : "";
  }

contains方法：檢查組內是否有一個具有指定名字的已啟用的控件，存在返回 true，不存在返回 false。

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

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

相關文章

  • angular6的響應式表單

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

    alogy 評論0 收藏0

  • angular6的響應式表單

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

    hzc 評論0 收藏0

  • angular6的響應式表單

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

    MycLambert 評論0 收藏0

  • Angular 響應式表單之下拉框

    摘要：問題分析下拉框綁定的改變時，但是值卻沒有改變，導致檢查錯誤。性別下拉框的男女保密點擊刪除保密男女此時就尷尬了，中已經沒有保密選項了，但是下拉框綁定的卻還是。自定義控件中當更新后，不再中，重置為刪除后使用男女 1、問題分析 下拉框綁定的 options 改變時，但是 value 值卻沒有改變，導致檢查錯誤。 在線預覽 git倉庫 2、代碼分析 項目中遇到一個問題，選擇司機，是一個下拉...

    siberiawolf 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<