成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

huaixiaoz / 2497人閱讀

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

1、案例需求

表單提交，表單全部校驗(yàn)成功才能提交，當(dāng)表單校驗(yàn)錯(cuò)誤，表單邊框變紅，同時(shí)有錯(cuò)誤提示信息，有重置功能

在線預(yù)覽

git倉(cāng)庫(kù)

2、名詞解釋

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

2.1、FormControl

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

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

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

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

formControl：是一個(gè)輸入指令，接受 FormControl 的實(shí)例，在模版中使用。

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


  
  
  
  



//等同于
2.2、FormGroup

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

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

2.3、FormArray

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

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

FormControl、FormGroup、FormArray 類 用法一致

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

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

3、代碼分析

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

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

address 此時(shí)不是 fromControl 而是 formGroup。


    
    

      

    

      
      
      
{{errorMessage("city")}}

    

    

      
      
      
{{errorMessage("district")}}

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

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

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

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

第三種方式雖然簡(jiǎn)單，但是不夠完美，get方法不能一步到位，必須同時(shí)傳入 formGroupName 和 formControlName。因此在查看單個(gè)表單是否有錯(cuò)誤信息時(shí)，必須先判斷 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)是否有一個(gè)具有指定名字的已啟用的控件，存在返回 true，不存在返回 false。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101993.html

相關(guān)文章

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

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

    alogy 評(píng)論0 收藏0

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

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

    hzc 評(píng)論0 收藏0

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

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

    MycLambert 評(píng)論0 收藏0

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

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

    siberiawolf 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<