Question

我没有成功使用 Angular 2 rc.6 为我的表单创建基本的Cross字段验证。

constructor(private fb: FormBuilder) {
    this.signUpForm = fb.group({
        "firstName": ["", Validators.required],
        "lastName": ["", Validators.required],
        "email": ["", [Validators.required, ValidationService.emailValidator]],
        "password": ["", [Validators.required, ValidationService.passwordValidator]],
        "passwordConfirm": ["", [Validators.required]]
    }, {validator: this.matchingPasswords('password', 'confirmPassword')});

    this.firstName = this.signUpForm.controls["firstName"];
    this.lastName = this.signUpForm.controls["lastName"];
    this.email = this.signUpForm.controls["email"];
    this.password = this.signUpForm.controls["password"];
    this.passwordConfirm = this.signUpForm.controls["passwordConfirm"];
}

 matchingPasswords(passwordKey: string, confirmPasswordKey: string) {
    return (group: ControlGroup): {[key: string]: any} => {
        let password = group.controls[passwordKey];
        let confirmPassword = group.controls[confirmPasswordKey];

        if (password.value !== confirmPassword.value) {
            return {
                mismatchedPasswords: true
            };
        }
    }
}

我看过帖子Cross field validation in Angular2，但关键是我正在使用Angular 2 rc.6。

使用Angular 2 rc.6时， @ angular / common 不再提供 ControlGroup ，并且不是更新 @ angular / forms 我在哪里获得FormBuilder, Validators, AbstractControl, FormGroup。

结果是我的方法matchingPasswords不再起作用，我无法检查这两个密码是否匹配。

你们知道我应该使用什么而不是 ControlGroup ？

Answer 1

与其他评论中提到的内容相反，根据我的经验，仍需要“Validator”键才能使表单组验证正常工作（注意这是在Angular2 Final中）。

这是Angular网站上FormGroup文档中的密码匹配验证器：

    this.passwordForm = fb.group({
        password: ["",[]],
        confirmPassword: ["",[]]
    }, this.passwordMatchValidator);

    passwordMatchValidator(g : FormGroup){
        return g.get('password').value === g.get('confirmPassword').value ? null : {'mismatch': true};
    }

然而，在添加“验证器”之前，这不起作用：

this.passwordForm = fb.group({
    password: ["",[]],
    confirmPassword: ["",[]]
}, {'validator': this.passwordMatchValidator})

根据API更改

，ControlGroup仍然被FormGroup取代

Answer 2

我刚遇到同样的问题，以及@GünterZöchbauer强调的FormGroup问题，你需要删除{validator：，

所以

, {validator: this.matchingPasswords('password', 'confirmPassword')}

需要成为

, this.matchingPasswords('password', 'confirmPassword')

Answer 3

谢谢@GünterZöchbauer@ Slicc，我用formgroup替换了ControlGroup，然后删除了{ validator:,，现在应用程序正在运行。

但是，似乎matchingPasswords不会影响表单的有效性。您有任何想法如何修改此方法以进行更新吗？

此外，我认为该方法永远不会被调用：

matchingPasswords(passwordKey: string, confirmPasswordKey: string) {
    return (group: FormGroup): {[key: string]: any} => {
        let password = group.controls[passwordKey];
        let confirmPassword = group.controls[confirmPasswordKey];

        console.log(password, confirmPassword);

        if (password.value !== confirmPassword.value) {
            return {
                mismatchedPasswords: true
            };
        }
        else {
            return null;
        }
    }
}

交叉场验证 - Angular2 RC6

3 个答案: