在項目中彤钟，可以使用angular中的 @angular/forms模塊處理表單，但是并不需要在app.module中引用@angular/forms模塊跷叉，因為在app.module中已經(jīng)引入了@angular/platform-browser模塊逸雹，而在@angular/platform-browser模塊中又導(dǎo)出了 @angular/forms 。也就是說云挟，引入@angular/platform-browser模塊之后就可以直接使用@angular/forms模塊中提供的組件等內(nèi)容梆砸。
使用過程
從@angular/forms中引入需要用到的內(nèi)容
import {FormBuilder, Validators, FormGroup} from '@angular/forms';
對應(yīng)的表單初始化如下：formBuilder.group中的字段就是form表單中對應(yīng)的字段，Validators 用于校驗园欣，規(guī)則根據(jù)實際情況配置帖世。
constructor(private navCtrl: NavController,
private navParams: NavParams,
private formBuilder: FormBuilder,
private viewCtrl: ViewController,
private events: Events,
private httpService: HttpService,
private storageService: StorageService,
private nativeService: NativeService) {
this.loginForm = formBuilder.group({
username: ['', Validators.compose([Validators.minLength(0), Validators.maxLength(16), Validators.required,])],
password: ['', Validators.compose([Validators.required, Validators.minLength(0)])]
});
this.username = this.loginForm.controls['username'];
this.password = this.loginForm.controls['password'];
}
至此，表單初始化完成沸枯，下面是對應(yīng)的 模板代碼
<ion-row>
<ion-col>
<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" novalidate>
<ion-row>
<ion-col>
<ion-list inset class="no-border">
<ion-item [class.error]="!username.valid && username.touched">
<ion-label fixed>請輸入賬號</ion-label>
<ion-input type="text" [formControl]="username" clearInput=true></ion-input>
</ion-item>
<!--<div *ngIf="username.hasError('required') && username.touched" class="error-message">*請輸入用戶名</div>-->
<!--<div *ngIf="(username.hasError('minlength')||username.hasError('maxlength')||username.hasError('pattern')) && username.touched" class="error-message">*請輸入正確的電話號碼</div>-->
<ion-item>
<ion-label fixed>請輸入密碼</ion-label>
<ion-input type="password" [formControl]="password" clearInput=true></ion-input>
</ion-item>
<!--<div *ngIf="password.hasError('required') && password.touched" class="error-message">*請輸入密碼</div>-->
<!--<div *ngIf="(password.hasError('minlength')) && password.touched" class="error-message">*密碼長度最少為六位</div>-->
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div style="text-align: center">
<button ion-button round type="submit" class="login-button" [disabled]="!loginForm.valid">測 試</button>
</div>
</ion-col>
</ion-row>
</form>
</ion-col>
</ion-row>
對應(yīng)的 表單提交函數(shù)如下
login(value) {
this.nativeService.showLoading('loading...');
let password = Md5.hashStr(this.password).toString(),
params = {
username: value.username,
password: value.password,
};
this.httpService.login('/oauth/token', params).then(result => {
//xxx
}).catch(error => {
//xxx
});
}
ngSubmit 是一個@output屬性日矫，將表單的值以鍵值對的方式組裝成一個對象返回。
自定義檢驗函數(shù)
對以上代碼稍做修改 login.ts
constructor(private navCtrl: NavController,
private navParams: NavParams,
private formBuilder: FormBuilder,
private viewCtrl: ViewController,
private events: Events,
private httpService: HttpService,
private storageService: StorageService,
private nativeService: NativeService) {
this.loginForm = formBuilder.group({
username: ['', Validators.compose([Validators.minLength(0), Validators.maxLength(16), Validators.required, ])],
password: ['', Validators.compose([Validators.required, Validators.minLength(0), this.passValidator])]
});
this.username = this.loginForm.controls['username'];
this.password = this.loginForm.controls['password'];
}
注意上面用到了一個自定義校驗函數(shù) this.passValidator 绑榴，該函數(shù)內(nèi)容如下
/**
* 自定義檢驗函數(shù)
* @param {FormControl} control
* @returns {{username: {info: string}}}
*/
passValidator(control: FormControl){
const value = control.value;
return value? null : {password: {info: '這是自定義校驗函數(shù)檢查出來的錯誤'}};
}
為了查看測試結(jié)果哪轿，需要修改一下模板文件 login.html
<ion-row>
<ion-col>
<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" novalidate>
<ion-row>
<ion-col>
<ion-list inset class="no-border">
<ion-item [class.error]="!username.valid && username.touched">
<ion-label fixed>請輸入賬號</ion-label>
<ion-input type="text" [formControl]="username" clearInput=true></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>請輸入密碼</ion-label>
<ion-input type="password" [formControl]="password" clearInput=true></ion-input>
</ion-item>
<div *ngIf="password.hasError('required') && password.touched" class="error-message">{{loginForm.getError('password', 'password')?.info}}</div>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div style="text-align: center">
<button ion-button round type="submit" class="login-button" [disabled]="!loginForm.valid">測 試</button>
</div>
</ion-col>
</ion-row>
</form>
</ion-col>
</ion-row>
僅僅是加了 <div *ngIf="password.hasError('required') && password.touched" class="error-message">{{loginForm.getError('password', 'password')?.info}}</div>
當(dāng)校驗不通過的時候，就會在這個div上顯示 在 login.ts 中定義的 提示信息翔怎。
以下是測試結(jié)果窃诉，仔細看
