在项目中，可以使用angular中的 @angular/forms模块处理表单，但是并不需要在app.module中引用@angular/forms模块，因为在app.module中已经引入了@angular/platform-browser模块，而在@angular/platform-browser模块中又导出了 @angular/forms 。也就是说，引入@angular/platform-browser模块之后就可以直接使用@angular/forms模块中提供的组件等内容。
使用过程
从@angular/forms中引入需要用到的内容
代码语言：javascript复制import {FormBuilder, Validators, FormGroup} from '@angular/forms';对应的表单初始化如下：formBuilder.group中的字段就是form表单中对应的字段，Validators 用于校验，规则根据实际情况配置。
代码语言：javascript复制 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'];
}至此，表单初始化完成，下面是对应的 模板代码
代码语言：javascript复制 <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>对应的 表单提交函数如下
代码语言：javascript复制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属性，将表单的值以键值对的方式组装成一个对象返回。
自定义检验函数
对以上代码稍做修改 login.ts
代码语言：javascript复制 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'];
}注意上面用到了一个自定义校验函数 this.passValidator ，该函数内容如下
代码语言：javascript复制 /**
* 自定义检验函数
* @param {FormControl} control
* @returns {{username: {info: string}}}
*/
passValidator(control: FormControl){
const value = control.value;
return value? null : {password: {info: '这是自定义校验函数检查出来的错误'}};
}为了查看测试结果，需要修改一下模板文件 login.html
代码语言：javascript复制 <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>
当校验不通过的时候，就会在这个div上显示 在 login.ts 中定义的 提示信息。以下是测试结果，仔细看
