使用带有验证的表单构建器制作一个简单的注册表单
这是我的模板
<div class="signup_formlist">
<div class="signup_formlistinfo">
<form (ngSubmit)="onSignUp()" [ngFormModel]="signupForm">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="signup_formlistinner">
<input ngControl="name" [(ngModel)]="signUpModel.name" type="text" value="" maxlength="50" placeholder="name">
<div class="success_img"><img src="images/checkbox_bg.png"></div>
</div>
<control-messages control="name"></control-messages>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="signup_formlistinner">
<input ngControl="email" [(ngModel)]="signUpModel.email" type="text" value="" placeholder="aj@ss.com">
<div class="success_img"><img src="images/checkbox_bg.png"></div>
</div>
<control-messages control="email"></control-messages>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="signup_formlistinner">
<input ngControl="password" [(ngModel)]="password" type="password" value="" maxlength="15" placeholder="Password">
<div class="success_img"><img src="images/checkbox_bg.png"></div>
</div>
<control-messages control="password"></control-messages>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="signup_formlistinner">
<input [(ngModel)]="signUpModel.cpassword" type="password" value="" maxlength="15" placeholder="Confirm Password">
<div class="success_img"><img src="images/checkbox_bg.png"></div>
</div>
<span style="color:#E82C0C" *ngIf="signUpModel.cpassword.length>0 && signUpModel.cpassword !== password">Invalid confirm password</span>
</div>
</div>
<input type="submit" [disabled]="!(signupForm.valid && signUpModel.cpassword == password)" id="btn_signup" value="sign up" class="submit_btn" ng-click="User_register($event);">
</form>
<div class="alreadyhave_txt">
<p> Already have an account ? <a id="loginsignin" (click)="onLogin()" href="javascript:void(0);"> Log In </a></p>
</div>
</div>
</div>
这是我的注册组件:
@Component({
selector: Constants.signUpCompSelector,
providers: [LoginService],
directives: [ControlMessages],
templateUrl: Constants.signUpCompTempUrl,
styleUrls: [Constants.loginCompStyleUrl],
})
export class SignUpComponent implements OnInit {
signUpModel: SignUpModel;
signupForm: ControlGroup;
password: string;
onLogin() {
this._router.navigate([Constants.login]);
}
onSignUp() {
// Encrypt
// this.signUpModel.password=CryptoJS.AES.encrypt(this.signUpModel.password, 'test').toString();
//console.log('response', this.signUpModel);
this.signUpModel.password = SHA256(this.password).toString();
this._loginService.signUpPost(this.signUpModel, (res) => {
if ((res.error) == false) {
this._router.navigate([Constants.login]);
}
else {
alert(Constants.signupFailed);
}
}, (err) => {
alert(Constants.errorMsg);
})
}
onForgotPassword() {
this._router.navigate([Constants.forgotPassword]);
}
constructor(private _router: Router, private _loginService: LoginService, private _formBuilder: FormBuilder) {
this.password = '';
this.signUpModel = { email: '', password: '', name: '', username: '', cpassword: '' };
this.signupForm = this._formBuilder.group({
'name': ['', ValidationService.charectersOnlyValidation],
'email': ['', Validators.compose([ValidationService.emailValidator])],
'password': ['', Validators.compose([ValidationService.passwordValidator])],
});
}
ngOnInit(): any {
}
}
上面的代码在 chrome 中运行良好,但在 Firefox、edge 和 IE 中它根本没有加载页面并且没有给出任何错误。我正在使用 angular2 2.0.0-beta.7