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

資訊專欄INFORMATION COLUMN

angular6的響應式表單

hzc / 2092人閱讀

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

1:在AppModule模塊里面引入 ReactiveFormsModule

要使用響應式表單,就要從@angular/forms包中導入ReactiveFormsModule,并把它添加到你的NgModule的imports數組中。

import { ReactiveFormsModule } from "@angular/forms";

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

2:創建一個新的組件

 ng g c NameEditor

3:請在組件中導入 FormControl 類

FormControl類是angular響應式表單最基本的構造快,要注冊單個的表單控件,請在組件中導入FormControl類,并創建一個FormControl的新實例,把它保存在某個屬性里面。
import { Component } from "@angular/core";
import { FormControl } from "@angular/forms";

@Component({
  selector: "app-name-editor",
  templateUrl: "./name-editor.component.html",
  styleUrls: ["./name-editor.component.css"]
})

export class NameEditorComponent {
  name = new FormControl("");
}    

4:在組件的模板中注冊一個表單控件

修改模板,為表單控件添加 formControl 綁定,formControl 是由 ReactiveFormsModule 中的 FormControlDirective 提供的。


Value: {{ name.value }}

使用這種模板綁定語法,把該表單控件注冊給了模板中名為 name 的輸入元素。這樣,表單控件和 DOM
元素就可以互相通訊了:視圖會反映模型的變化,模型也會反映視圖中的變化。

5:替換表單控件的值

FormControl 提供了一個setValue()方法,他會修改這個表單控件的值。

js

 updateName() {
      this.name.setValue("Nancy");
 }

html


Value:{{name.value}}

在這個例子中,你只使用單個控件FormControl,但是當調用 FormGroup 或 FormArray 的 setValue()
方法時,傳入的值就必須匹配控件組或控件數組的結構才行

6:把表單控件分組

FormControl的實例能控制單個輸入框所對應的控件,FormGroup可以控制一組FormControl實例的表單狀態,當創建FormGroup時,其中的每一個控件都會根據名字進行跟蹤

1>:創建新的組件

 ng g c ProfileEditor

2>:導入 FormGroup 和 FormControl 類并且創建 FormGroup實例

import { Component } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";
 
@Component({
  selector: "app-profile-editor",
  templateUrl: "./profile-editor.component.html",
  styleUrls: ["./profile-editor.component.css"]
})

export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(""),
    lastName: new FormControl(""),
  });
}
現在這些多帶帶的控件FormControl被收集到了一個控件組中FormGroup, FormGroup 實例擁有和 FormControl 實例相同的屬性(比如 value、untouched)和方法(比如 setValue())。

3>:關聯FormGroup的模型和視圖

FormGroup能追蹤每個多帶帶控件FormControl的狀態和變化,如果其中某個控件的狀態或值變化了,父控件也會一次新的狀態變更或值變更事件

profileForm通過[formGroup]指令綁定到了 form
元素,在該模型和表單中的輸入框之間創建了一個通訊層,FormControlName 指令提供的 formControlName 屬性把每個輸入框和 FormGroup 中定義的表單控件綁定起來。

4>:關聯FormGroup的模型和視圖

html

  

js

onSubmit () {
    console.warn(this.profileForm.value);
}
form 標簽所發出的 submit 事件是原生 DOM 事件,通過點擊類型為 submit 的按鈕可以觸發本事件

6:嵌套的表單組

js

profileForm = new FormGroup({
    firstName: new FormControl(""),
    lastName: new FormControl(""),
    address: new FormGroup({
      street: new FormControl(""),
      city: new FormControl(""),
      state: new FormControl(""),
      zip: new FormControl("")
    })
});

html

部分模型修改

html


js

updateProfile() {
      this.profileForm.patchValue({
        firstName: "Nancy",
        address: {
          street: "123 Drew Street"
        }
      });
}
patchValue() 方法要針對模型的結構進行更新。patchValue() 只會更新表單模型中所定義的那些屬性。

6:使用 FormBuilder 來生成表單控件

FormBuilder 服務提供了一些便捷方法來生成表單控件。
FormBuilder在幕后也使用同樣的方式來創建和返回這些實例,只是用起來更簡單。 下面會重構 ProfileEditor 組件,用FormBuilder 來代替手工創建這些 FormControl 和 FormGroup。

Step 1 - 導入 FormBuilder 類

import { FormBuilder } from "@angular/forms";

Step 2 - 注入FormBuild 服務

constructor(private fb: FormBuilder) { }

Step 3- 生成表單控件

FormBuilder 服務有三個方法:control()、group() 和 array()。這些方法都是工廠方法,用于在組件類中分別生成
FormControl、FormGroup 和 FormArray。

你可以使用 group() 方法,用和前面一樣的名字來定義這些屬性。這里,每個控件名對應的值都是一個數組,這個數組中的第一項是其初始值。你可以只使用初始值來定義控件,但是如果你的控件還需要同步或異步驗證器,那就在這個數組中的第二項和第三項提供同步和異步驗證器。

import { Component } from "@angular/core";
import { FormBuilder } from "@angular/forms";
 
@Component({
  selector: "app-profile-editor",
  templateUrl: "./profile-editor.component.html",
  styleUrls: ["./profile-editor.component.css"]
})
export class ProfileEditorComponent {
  profileForm = this.fb.group({
    firstName: ["張"],
    lastName: ["娉"],
    address: this.fb.group({
      street: [""],
      city: [""],
      state: [""],
      zip: [""]
    }),
  });
 
  constructor(private fb: FormBuilder) { }
}

7:簡單的表單驗證

如何把單個驗證器添加到表單控件中,以及如何顯示表單的整體狀態。

Step 1 - 導入驗證器函數

import { Validators } from "@angular/forms";
響應式表單包含了一組開箱即用的常用驗證器函數。這些函數接收一個控件,用以驗證并根據驗證結果返回一個錯誤對象或空值。

Step 2 - 把字段設為必填

最常見的校驗項是把一個字段設為必填項。本節描述如何為 firstName 控件添加“必填項”驗證器。
在組件中,把靜態方法 Validators.required 設置為 firstName 控件值數組中的第二項。
profileForm = this.fb.group({
  firstName: ["", Validators.required],
  lastName: [""],
  address: this.fb.group({
    street: [""],
    city: [""],
    state: [""],
    zip: [""]
  }),
});
HTML5 有一組內置的屬性,用來進行原生驗證,包括 required、minlength、maxlength等。雖然是可選的,不過你也可以在表單的輸入元素上把它們添加為附加屬性來使用它們。這里我們把 required 屬性添加到 firstName
輸入元素上。

這些 HTML5 驗證器屬性可以和 Angular
響應式表單提供的內置驗證器組合使用。組合使用這兩種驗證器實踐,可以防止在模板檢查完之后表達式再次被修改導致的錯誤。

8:顯示表單的狀態

現在,你已經往表單控件上添加了一個必填字段,它的初始值是無效的(invalid)。這種無效狀態冒泡到其父 FormGroup 中,也讓這個 FormGroup 的狀態變為無效的。你可以通過該 FormGroup 實例的 status 屬性來訪問其當前狀態。

Form Status: {{ profileForm.status }}

9:使用表單數組管理動態控件

FormArray 是 FormGroup 之外的另一個選擇,用于管理任意數量的匿名控件,如果你事先不知道子控件的數量,FormArray是一個很好的選擇

Step 1 - 導入 FormArray

import { FormArray } from "@angular/forms";

Step 2 - 定義 FormArray

為 profileForm 添加一個 aliases 屬性,把它定義為 FormArray 類型。(FormBuilder 服務用于創建 FormArray 實例。)
profileForm = this.fb.group({
   firstName: ["張", Validators.required],
    lastName: ["以"],
    address: this.fb.group({
      street: [""],
      city: [""],
      state: [""],
      zip: [""]
    }),
    aliases: this.fb.array([
      this.fb.control("")
    ])
  });

Step 3 - 訪問FormArray控件

通過 getter 來訪問控件比較便捷,也容易復用
使用 getter 語法來創建一個名為 aliases 的類屬性
get aliases() {
 
}
從父控件 FormGroup 中接收綽號的 FormArray 控件。
get aliases() {
  return this.profileForm.get("aliases") as FormArray;
}
addAlias() {
  this.aliases.push(this.fb.control(""));
}

Step 3 - 在模板中顯示表單數組

在模型中定義了 aliases 的 FormArray 之后,你必須把它加入到模板中供用戶輸入,使用 formArrayName 在這個
FormArray 和模板之間建立綁定。

Aliases

每當新的 alias 加進來時,FormArray 就會基于這個索引號提供它的控件。這將允許你在每次計算根控件的狀態和值時跟蹤每個控件。

全部代碼

html

Address

Aliases

Form Status: {{ profileForm.status }}

js

import { Component, OnInit } from "@angular/core";
import {FormControl, FormGroup, FormBuilder, Validators, FormArray} from "@angular/forms";

@Component({
  selector: "app-profile-editor",
  templateUrl: "./profile-editor.component.html",
  styleUrls: ["./profile-editor.component.css"]
})
export class ProfileEditorComponent implements OnInit {
  profileForm = this.fb.group({
   firstName: ["張", Validators.required],
    lastName: ["以"],
    address: this.fb.group({
      street: [""],
      city: [""],
      state: [""],
      zip: [""]
    }),
    aliases: this.fb.array([
      this.fb.control("")
    ])
  });
  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {
  }

  onSubmit () {
    console.warn(this.profileForm.value);
  }
  
  updateProfile() {
    this.profileForm.patchValue({
      firstName: "Nancy",
      address: {
        street: "123 Drew Street"
      }
    });
  }
  get aliases () {
    return this.profileForm.get("aliases") as FormArray;
  }
  addAlias() {
    this.aliases.push(this.fb.control(""));
  }
}

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

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

相關文章

  • angular6響應表單

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

    alogy 評論0 收藏0
  • angular6響應表單

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

    MycLambert 評論0 收藏0
  • 【CuteJavaScript】Angular6入門項目(3.編寫服務和引入RxJS)

    摘要:發布通過回調方法向發布事件。觀察者一個回調函數的集合,它知道如何去監聽由提供的值。 本文目錄 一、項目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件 四、編寫服務 1.為什么需要服務 2.編寫服務 五、引入RxJS 1.關于RxJS 2.引入RxJS 3.改造數據獲取方式 六、改造組件 1.添...

    RebeccaZhong 評論0 收藏0
  • 初探Angular6.x---用戶列表與用戶詳情

    摘要:初探用戶列表與用戶詳情在上一篇博文進入用戶編輯中我們分享了屬性名稱和這兩個表達式的運用我們已經可以將表單里的修改與我們展示出來的值進行同步今天我們來學習在中如何展示一個列表在項目里列表展示可以說是非常普遍的一個需求了幾乎有展示數   初探Angular6.x---用戶列表與用戶詳情   在上一篇博文《Angular6.x---進入用戶編輯》中,我們分享了{{屬性名稱}}和[(ngMod...

    helloworldcoding 評論0 收藏0
  • angular6 自定義組件,實現雙向數據綁定

    摘要:在編寫組件之前,首先看一下組件的使用方式和效果其中標簽是自定義組件,利用符號進行雙向綁定,下面標簽顯示所綁定的值。 在包裝輸入類型的組件時,我們需要向外暴露數據接口,用戶輸入和輸出,這時候在組件內部定義雙向綁定,會大大方便用戶的使用。 在編寫組件之前,首先看一下組件的使用方式和效果: app.component:{{testBinding}} 其中binding-test標簽是自定義...

    Ajian 評論0 收藏0

發表評論

0條評論

hzc

|高級講師

TA的文章

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