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

資訊專欄INFORMATION COLUMN

Angular 響應(yīng)式表單 基礎(chǔ)例子

guqiu / 2801人閱讀

摘要：注入服務(wù)生成表單控件提供了一個語法糖，以簡化或?qū)嵗膭?chuàng)建過程。導(dǎo)致在輸入的時候，表單校驗錯誤，卻顯示不了錯誤信息。因此需要再次判斷狀態(tài)，只要表單值改變，則為未對表單操作時，點擊提交按鈕時，則模擬表單被，顯示提示信息

1、案例需求

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

2、代碼分析

在線預(yù)覽

git倉庫

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

2.1、注冊 ReactiveFormsModule

要使用響應(yīng)式表單，就要從 @angular/forms 包中導(dǎo)入 ReactiveFormsModule 并把它添加到你的 NgModule 的 imports 數(shù)組中。

app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule
  ]
2.2、使用 FormBuilder 來生成表單控件

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

注入 FormBuilder 服務(wù)

constructor(
    private fb: FormBuilder
  ) { }

生成表單控件

FormBuilder 提供了一個語法糖，以簡化 FormControl、FormGroup 或 FormArray 實例的創(chuàng)建過程。它會減少構(gòu)建復(fù)雜表單時所需的樣板代碼的數(shù)量（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、表單狀態(tài)

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

valid 表單值是否有效

pristine 表單值是否未改變

dirty 表單值是否已改變

touched 表單是否已被訪問過

untouched 表單是否未被訪問過

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

初始狀態(tài)
狀態(tài) 值
valid false
pristine true
dirty false
touched false
untouched true
輸入狀態(tài)
狀態(tài) 值
valid true
pristine false
dirty true
touched false
untouched true
失去焦點后狀態(tài)
狀態(tài) 值
valid true
pristine false
dirty true
touched true
untouched true
2.5、表單校驗

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

自定義表單校驗器

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()]
    });
顯示錯誤提示信息

當(dāng)頁面初始化的時候不應(yīng)該顯示錯誤信息，也就是表單touched為true

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

然而touched只有失去焦點才為true，在輸入的時候一直為false。導(dǎo)致在輸入的時候，表單校驗錯誤，卻顯示不了錯誤信息。因此需要再次判斷 dirty 狀態(tài)，只要表單值改變，則為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();
      }
    });
  }

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101951.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

  • angular4 學(xué)習(xí)記錄 -- 表單

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

    james 評論0 收藏0

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

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

    huaixiaoz 評論0 收藏0

發(fā)表評論

0條評論

guqiu

男|高級講師

TA的文章

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