亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Angular 響應(yīng)式表單之表單分組

huaixiaoz / 2579人閱讀

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

1、案例需求

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

在線預(yù)覽

git倉庫

2、名詞解釋

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

2.1、FormControl

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

當使用響應(yīng)式表單時，F(xiàn)ormControl 類是最基本的構(gòu)造塊。要注冊單個的表單控件，在組件中導(dǎo)入 FormControl 類，并創(chuàng)建一個 FormControl 的新實例，把它保存在類的某個屬性中。

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

在組件類中創(chuàng)建了控件之后，還要把它和模板中的一個表單控件關(guān)聯(lián)起來，為表單控件添加 formControl 綁定。

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

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


  
  
  
  



//等同于
2.2、FormGroup

FormGroup：跟蹤一組 FormControl 實例的值和有效性狀態(tài)

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

2.3、FormArray

FormArray：跟蹤一個控件數(shù)組的值和有效性狀態(tài)

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

FormControl、FormGroup、FormArray 類 用法一致

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

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

3、代碼分析

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

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

address 此時不是 fromControl 而是 formGroup。


    
    

      

    

      
      
      
{{errorMessage("city")}}

    

    

      
      
      
{{errorMessage("district")}}

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

// 太復(fù)雜了
this.formGroup.controls["address"].controls["province"];

// 同樣復(fù)雜
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方法：檢查組內(nèi)是否有一個具有指定名字的已啟用的控件，存在返回 true，不存在返回 false。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/101993.html

相關(guān)文章

  • angular6的響應(yīng)式表單

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

    alogy 評論0 收藏0

  • angular6的響應(yīng)式表單

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

    hzc 評論0 收藏0

  • angular6的響應(yīng)式表單

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

    MycLambert 評論0 收藏0

  • Angular 響應(yīng)式表單之下拉框

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

    siberiawolf 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<