关于Comparing fields in validator with Angular 2,请参考这question条.不幸的是,Angular 2稍微改变了一点,所以这个解决方案似乎不再起作用了.以下是我的代码:
import {IonicApp, Page, NavController, NavParams} from 'ionic/ionic'
import {Component} from 'angular2/core'
import {FORM_PROVIDERS, FormBuilder, Validators} from 'angular2/common'
import {ControlMessages} from '../../components/control-messages'
import {ValidationService} from '../../services/validation-service'
@Page({
templateUrl: 'build/pages/account/register.html',
directives: [ControlMessages]
})
export class RegisterPage {
constructor(nav: NavController, private builder: FormBuilder) {
this.nav = nav
this.registerForm = this.builder.group({
'name': ['', Validators.required],
'email': ['', Validators.compose([Validators.required, ValidationService.emailValidator])],
'password': ['', Validators.required],
'repeat': ['', this.customValidator]
}
)
}
register() {
alert(this.registerForm.value.password)
}
private customValidator(control) {
//console.log(this.registerForm.value.password)
//return {isEqual: control.value === this.registerForm.value.password}
return true
}
}
我的html:
<ion-content class="account">
<ion-list padding>
<form [ngFormModel]='registerForm' (submit)='register()'>
<div class="centered">
<img class="logo" src="img/logo.png" alt="">
</div>
<div class="spacer" style="height: 20px;"></div>
<ion-input>
<ion-label floating>Name</ion-label>
<input type="text" ngControl='name' id='name'>
<control-messages control="name"></control-messages>
</ion-input>
<ion-input>
<ion-label floating>Email</ion-label>
<input type="email" ngControl='email' id='email'>
<control-messages control="email"></control-messages>
</ion-input>
<ion-input>
<ion-label floating>Password</ion-label>
<input type="password" ngControl='password' id='password' value="">
<control-messages control="password"></control-messages>
</ion-input>
<ion-input>
<ion-label floating>Confirm Password</ion-label>
<input type="password" ngControl='repeat' id='repeat'>
<control-messages control="repeat"></control-messages>
</ion-input>
<button class="calm" full type='submit' [disabled]='!registerForm.valid'>Register</button>
<ion-item style="background-color:transparent;border:none;">
<button class="text-button" clear item-right (click)="gotoLogin()">Have an account already, Login</button>
</ion-item>
</form>
</ion-list>
</ion-content>
但不幸的是,我无法访问验证函数中的password
值.如果取消注释console.log(this.registerForm.value.password)
,则会收到以下错误消息:
异常:TypeError:无法读取未定义的属性"值"
知道吗?谢谢