Angular 2 Form表單
在angular2 form表單中我們需要了解表單數據綁定、數據驗證、數據提交等內容，在下面的示例中並沒有實際提交到后台，這部分內容在今后webapi中加以練習。
表單建立
<form (ngSubmit)="onSubmit(planetForm.value)" #planetform="ngForm">
</form>
這里是一個空的表單ngSubmit是一個事件，用於提交數據，數據則是整個form表單的內容，通常情況下我們的表單會綁定到我們的一個model中，那么提交的數據最后也是以json格式返回到后台來處理。
在表單中我們可以使用標准的html5控件來處理用戶輸入。
數據綁定
<div class="form-group">
<label class="col-xs-4 control-label" for="id">id : </label>
<div class="col-xs-8">
<input type="text" style="width: 300px" class="form-control" required
[(ngModel)]="myPlanet.id"
ngControl="id"
#planetid="ngForm">
<div [hidden]="planetid.valid || planetid.pristine" class="alert alert-danger">
The Name of green car is required !
</div>
</div>
</div>
這個一個表單輸入的內容其中使用的是bootstrap的表單樣式，在input中我們使用[(ngModel)]（注意大小寫）實現雙向綁定，ngControl用於檢測數據變化對應的是model中的字段，設置input的變量為ngForm來告訴angular 這個輸入是這個表單內容。在vs中由於默認設置在粘貼html文本時會自動將大寫字母變化成小寫字母，所以angular的某些標簽很容易發生錯誤，所以需要關閉這個自動轉換，方法就是在vs的選項中將文本編輯器中的html高級選項下的粘貼時設置格式設置為false。
數據驗證
html5內置的數據驗證包括Required、minLength、maxLength、pattern ，我們可以將這些標簽應用到我們的輸入控件上，如
<input type="text" style="width: 300px" class="form-control" required maxlength="10" minLength="4"
[(ngModel)]="myPlanet.id"
ngControl="name"
#planetid="ngForm">
<div [hidden]="planetid.valid || planetid.pristine" class="alert alert-danger">
The id is required !
</div>
這里的"planetid.valid || planetid.pristine是驗證這個input輸入是否有效，或者數據是否改變。
Formbuilder
Formbuilder是我們可以采用的另一種方式來創建Form，這種方式是以模型驅動完成的，更適合我們進行編碼控制，有利於我們將邏輯與視圖分離。
Angular2 form 作用機制由兩個主要的組件Controls和Controls group。
Control：包含值和驗證狀態，一個control能夠被邦定可以包含三個可選參數（缺省值，驗證，異步驗證），例如
this.username = new Control('Default value', Validators.required, usernameValidator.checkIfAvailable);
在html應用時使用ngControl標簽綁定這個控件
<input required type=”text” ngControl=”username” />
這里定義的username與input中ngControl指定的名稱要一致。
Control Groups：form定義的一部分，通過將多個cotrol組合在一起形成組。
class App {
name: Control;
username: Control;
email: Control;
form: ControlGroup;
constructor(private builder: FormBuilder) {
this.name = new Control('', Validators.required);
this.email = new Control('', Validators.required);
this.username = new Control('', Validators.required);
this.form = builder.group({
name: this.name,
email: this.email,
username: this.username
});
}
};
html應用時加入ngFormModel來標識。
<form [ngFormModel]=”form”>
自定義驗證
除了內置驗證外，我們還可以自定義驗證，例子如下
import {Control} from 'angular2/common';
interface ValidationResult
{
[key: string]: boolean;
}
export class UsernameValidator
{
static startsWithNumber( control: Control ): ValidationResult
{
if ( control.value !="" && !isNaN( control.value.charAt( 0 ) ) ){
return { "startsWithNumber": true };
}
return null;
}
}
這個自定義驗證如果輸入的值中首字母是數字則驗證無效，返回null則驗證通過。使用方法
首先import {UsernameValidator} from './customValidate';
然后在我們需要驗證的控件上加入自定義驗證
this.name = new Control( this.myPlanet.name, UsernameValidator.startsWithNumber );
錯誤提示
<div *ngIf="name.dirty && !name.valid">
<p *ngIf="name.errors.startsWithNumber">
Your name can't start with a number
</p>
</div>
這里的errors. startsWithNumber就是我們自定義返回的key值。最好的方式是使用hasError，因為如果返回的startsWithNumber是null的話會引發異常
<p *ngIf="name.hasError('startsWithNumber')">
異步驗證
如果我們需要使用service去到后台獲取數據並驗證，則我們需要使用異步驗證方式，這里的例子使用promise模擬。
static usernameTaken( control: Control ): Promise<ValidationResult>
{
let q = new Promise(( resolve, reject ) =>
{
setTimeout(() =>
{
if ( control.value !== 'oldkingsir') {
resolve( { "usernameTaken": true});
} else {
resolve( null );
}
}, 1000 )
});
return q;
}
真實應用可能是
class ProductValidator {
static productExists(control: Control): {[key: string]: any} {
return new Promise( resolve => {
var productService = new ProductService();
var product: Product;
productService.getProduct(control.value)
.then(productFound => {
if (productFound == null) {
// need to return something if not ok
resolve({productExists: false});
} else {
// need to return null if ok
resolve(null);
}
});
});
}
}
下面需要使用驗證的第三個參數，方式如下
this.name = new Control( this.myPlanet.name,UsernameValidator.startsWithNumber, UsernameValidator.usernameTaken );
html
<div *ngIf="name.dirty && !name.valid">
<span *ngIf="name.pending">Checking istaken...</span>
<p *ngIf="name.hasError('startsWithNumber')">
Your name can't start with a number
</p>
<p *ngIf="name.hasError('usernameTaken')">
Your name is already taken
</p>
</div>
這里使用了pending來友好提示驗證中。
組合驗證
如果需要進行多個驗證可以使用compose組合驗證，如下
this.name = new Control('', Validators.compose([Validators.required, Validators.minLength(4)]));
最后如果整個表單驗證不通過我們不提交則可以在提交按鈕上加以處理，如
<button type="submit" class="btn btn-default" [disabled]="!form.valid">Submit</button>