0

使用带有验证的表单构建器制作一个简单的注册表单

这是我的模板

<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

4

0 回答 0