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

資訊專欄INFORMATION COLUMN

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

guqiu / 2799人閱讀

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

1、案例需求

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

2、代碼分析

在線預(yù)覽

git倉庫

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

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

注入 FormBuilder 服務(wù)

constructor(
    private fb: FormBuilder
  ) { }

生成表單控件

FormBuilder 提供了一個(gè)語法糖，以簡化 FormControl、FormGroup 或 FormArray 實(shí)例的創(chuàng)建過程。它會減少構(gòu)建復(fù)雜表單時(shí)所需的樣板代碼的數(shù)量（new FormControl）。

formGroup: FormGroup;

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

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


  

    
    
      
{{nameErrorMessage}}
2.4、表單狀態(tài)

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

valid 表單值是否有效

pristine 表單值是否未改變

dirty 表單值是否已改變

touched 表單是否已被訪問過

untouched 表單是否未被訪問過

以輸入姓名的表單為例，只驗(yàn)證該表單的必填項(xiàng)時(shí)。表單先獲取焦點(diǎn)并且輸入姓名，最后移除焦點(diǎn)，每一步表單的狀態(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
失去焦點(diǎn)后狀態(tài)
狀態(tài) 值
valid true
pristine false
dirty true
touched true
untouched true
2.5、表單校驗(yàn)

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

自定義表單校驗(yàn)器

name-validator.ts

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

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

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

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

    return null;

  };
}
使用自定義驗(yàn)證器

app.component.ts

this.formGroup = this.fb.group({
      name: ["", nameValidator()],
      age: ["", ageValidator()],
      sex: ["", sexValidator()]
    });
顯示錯(cuò)誤提示信息

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

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

然而touched只有失去焦點(diǎn)才為true，在輸入的時(shí)候一直為false。導(dǎo)致在輸入的時(shí)候，表單校驗(yàn)錯(cuò)誤，卻顯示不了錯(cuò)誤信息。因此需要再次判斷 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

未對表單操作時(shí)，點(diǎn)擊提交按鈕時(shí)，則模擬表單被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://m.specialneedsforspecialkids.com/yun/101951.html

相關(guān)文章

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

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

    alogy 評論0 收藏0

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

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

    hzc 評論0 收藏0

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

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

    MycLambert 評論0 收藏0

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

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

    james 評論0 收藏0

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

    摘要：跟蹤獨(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倉庫 2、名詞解釋 在分析代碼之前，首先明...

    huaixiaoz 評論0 收藏0

發(fā)表評論

0條評論

guqiu

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<