Angular 2 之五 表單

2022-01-16 03:50:44 字數 1958 閱讀 3348

標註方式定義表單步驟如下:

建立表單輸入的資料模型

建立元件用於表單輸入

建立元件模板用於表單布局

使用ngmodel將資料模型字段雙向繫結到對應的輸入控制項

輸入控制項增加ngcontrol屬性

增加css視覺效果

顯示或隱藏輸入錯誤提示資訊

表單資料驗證正確之前禁用提交按鈕

通過ngsubmit處理資料提交。

表單元件定義如下所示:

@component()

directives元資料注入form_directives,模板可使用ngform directive。一般地,directive在匹配選擇器(selector)後被加入元素,但angular 2自動將ngform加到模板的所有

元素中,並實現以下功能:

因此:上節通過ngform和ngcontrol標註隱式建立controlgroup和control,雖然比較方便但是不夠靈活,即無法定製各種選項。formbuilder是乙個工廠物件,用於程式設計建立controlgroup和control。

表單元件定義如下所示:

@component()

export class demoformskubuilder );  

} onsubmit(value: string):

void

}

和上節**的區別在於:

1. 內建資料校驗

為確保使用者輸入正確的資料格式,angular 2使用validator校驗輸入資料,內建提供以下資料校驗:

2. 5.5.2 使用資料校驗

建立control時指明資料驗證條件,如:

this.myform =fb.group();

如果是多個條件則採用組合方式(skuvalidator是自定義的),如:

this.myform =fb.group();

3. 錯誤資訊提示

angular 2使用control的css class反映狀態:

4. 自定義資料校驗

自定義資料校驗如下所示:

export class validators  : null;  

}

其中:返回promise可實現非同步資料校驗。

ngmodel用於模型和表單的雙向資料繫結,例如:

<

input

type

="text"

id="productnameinput"

placeholder

="product name"

[ngformcontrol]

="myform.find('productname')"

[(ngmodel)]

="productname"

>

這裡使用ngformcontrol是為了實現資料校驗功能。

點type=」submit」的按鈕將觸發ngsubmit事件。當表單資料不正確時可禁用該按鈕,如:

<

button

type

="submit"

class

="btn btn-default [disabled]="

!heroform.form.valid"

>

submit

button

>

在onsubmit()**函式中,可獲取controlgroup值物件,其中key是控制項名稱,value是輸入值。

controlgroup和control的valuechanges方法返回observable物件。subscribe 該返回物件可以獲取輸入值變化的非同步資料流。

Angular2表單驗證

angular2中使用表單,首先要在from上新增 forma ngform 這個是給from定義成了angular的from物件 form horizontal forma ngform ngsubmit onsubmit showmodal 下面的label中的for對應著input中的id值,...

angular2 模板驅動型表單

要使用模板驅動型表單,我們必須先導入formsmodule模組。ngmodule template.component.html template.component.ts import from angular core component export class templatecompone...

angular2 發布angular2模組,服務

上回說到了如何利用npm包管理器發布自己的包,這次咱們就來個實踐。1 寫好自己的元件 2 利用npm發布自己的元件 3 使用包 基於angular2的架構,一般都需要下列檔案 html檔案,css檔案,component檔案,module檔案。component檔案內容 import區域 impor...