要使用模板驅動型表單，我們必須先導入formsmodule模組。
@ngmodule()}
import from '@angular/core';
@component()
export class templatecomponent
onsubmit(value)
}
angular2會自動為表單新增ngform指令，我們不需要再單獨寫幾點說明：
angular2內建了一些常見的驗證器，required(必填)，maxlength(最大長度),minlength(最小長度),max(最大值),min(最小值),pattern(正規表示式)...等等，我們可以直接使用它。
我們可以通過模板引用變數#name="ngmodel"引用ngmodel指令，來獲該元素的驗證資訊，從而做相應的驗證提示。
*ngif="name.invalid && (name.dirty || name.touched || form.submitted)"，這裡表示當name為臟值或者已經被訪問過或者表單已經提交了，name值仍然無效時，顯示錯誤資訊，詳細的狀態說明可參考通過 ngmodel 跟蹤修改狀態與有效性驗證。
當元素驗證失敗時，我們可以通過errors屬性獲取具體是那一項驗證沒有通過，如：*ngif="name.errors.required"，表示如果errors上存在required屬性，表明使用者沒有輸入。
假設我們需要乙個可以指定驗證規則的密碼驗證器。
password.validator.ts
import from '@angular/forms';
import from '@angular/core'
@directive(]
})export class passwroddirective implements validator}}
return error;
}}
password is illegal!
驗證器的本質就是乙個屬性型指令。
angular2內建的驗證器都是繫結在ng_validators上的，我們可以通過設定providers屬性對其進行擴充套件。
我們通過@input()給指令新增了乙個輸入引數，這樣我們可以指定驗證規則了。
該指令的類實現了validator介面，需要實現validate這個方法。validate方法接收乙個abstractcontrol型別的引數control,我們可以通過control.value獲取到需要校驗的值。validate方法返回null表示驗證成功，返回物件（這個例子中是：）表示驗證失敗，返回的錯誤物件的屬性會被新增到errors物件中。
假設我們需要乙個可以驗證使用者名稱是否重複的驗證器。
name.validator.ts
import from '@angular/forms';
import from '@angular/core';
const userlist = [
'jack',
'mary',
'jimi',
'tom'
];@directive(]
})export class checknamedirective implements asyncvalidator);
} else
}, 2000)
});}
}
name can not be empty!
this name is exist!
非同步驗證器的本質也是乙個屬性型指令。
我們可以通過設定providers:對ng_async_validators進行擴充套件。
該指令的類實現了asyncvalidator介面，需要實現validate這個方法。validate方法接收乙個abstractcontrol型別的引數control,我們可以通過control.value獲取到需要校驗的值。與同步驗證器不同的是，非同步驗證器的validate方法返回乙個promise物件，當延時操作執行完以後，resolve(null)表示驗證成功，resolve()表示驗證失敗，resolve傳遞的資料會被附加到errors物件中。
當所有的同步驗證器驗證通過後，才會開始非同步驗證。
Angular2表單驗證
angular2中使用表單，首先要在from上新增 forma ngform 這個是給from定義成了angular的from物件 form horizontal forma ngform ngsubmit onsubmit showmodal 下面的label中的for對應著input中的id值，...
Angular 2 之五 表單
標註方式定義表單步驟如下 建立表單輸入的資料模型 建立元件用於表單輸入 建立元件模板用於表單布局 使用ngmodel將資料模型字段雙向繫結到對應的輸入控制項 輸入控制項增加ngcontrol屬性 增加css視覺效果 顯示或隱藏輸入錯誤提示資訊 表單資料驗證正確之前禁用提交按鈕 通過ngsubmit處...
angular2 發布angular2模組，服務
上回說到了如何利用npm包管理器發布自己的包，這次咱們就來個實踐。1 寫好自己的元件 2 利用npm發布自己的元件 3 使用包 基於angular2的架構，一般都需要下列檔案 html檔案，css檔案，component檔案，module檔案。component檔案內容 import區域 impor...