Question

如果两个密码都匹配，我正在尝试验证确认密码但我无法获得密码的价值

这个console.log(this.form)打印

但如果我

，我无法访问password.value

console.log(this.form.controls)

或console.log(this.form['controls'])

newpassowrd.component.ts

...
export class PasswordNewComponent implements OnInit{

    password: string;
    id: string;
    form: FormGroup;
    submitted: boolean;



    constructor(    private http:Http,
                                private route: ActivatedRoute) { }


    ngOnInit() {

        this.id = this.route.snapshot.queryParams['id'];
        this.form = new FormGroup({
                    password  : new FormControl(null, [Validators.required, Validators.minLength(8)] ),
                    confirmpass  : new FormControl(null, [Validators.required, Validators.minLength(8), this.forbiddenNames.bind(this)])
        })
    }

    forbiddenNames(control: FormControl ):{[s: string]: boolean}{

        console.log(this.form.controls); // need to the the password value to compare with the confirmed password

        // if (this.form.controls.password.value.indexOf(control.value) !== -1){
            // return {'nameIsForbidden': true};
        // }

        return {'passwordNotMatch': false};
    }


    ....

newpassword.component.html 我正在使用我创建的自定义变量进行测试

<div>
    <div class="panel">
        <h1 class="panel__title">Reset Password</h1>
            <h5>Please enter your email and the new password</h5>
            <form [formGroup]="form" (ngSubmit)="onResetPassword(  form.valid )">


                    <div class="input-field col s12">
                        <label for="password">New Password</label>
                        <input type="password"
                                                id="password"                                               
                                                formControlName="password">
                    </div>

                    <span class="error-msg"
                        *ngIf ="form.get('password').invalid && form.get('password').touched || form.get('password').invalid && submitted">
                            Please confirm your password
                    </span>

                    <div class="input-field col s12">
                        <label for="confirmpass">Confirm Password</label>
                        <input type="password"
                                                id="confirmpass"                                                
                                                formControlName="confirmpass">
                    </div>
                    <span class="error-msg"
                        *ngIf ="form.get('confirmpass').invalid && form.get('confirmpass').touched || form.get('confirmpass').invalid && submitted"
                        >Please confirm your password</span>                    

                    <span class="error-msg"
                    *ngIf ="form.get('confirmpass').errors['nameIsForbidden']"

                    > custom message test validation</span>


            <button class="btn panel__btn" type="submit" name="action">Reset Password</button>
        </form>
    </div>
</div>

this is a lorem ipsum content

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一台未知的打印机采用了类型的厨房，并将其拼凑成一本类型的样本。它不仅存在了五个世纪，而且还延续了电子排版，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表格的推出而普及，最近还推出了包括Lorem Ipsum版本在内的桌面出版软件Aldus PageMaker

Answer 1

我认为你可以调用form.get（＆＃39; NameOfField＆＃39;）来获取你想要比较的字段的引用。

我对您可能会考虑的验证匹配密码的方式略有不同：

我将我的验证器方法作为静态方法放在一个单独的类中。

export class PasswordValidation {

    static MatchPassword(AC: AbstractControl) {
       const formGroup = AC.parent;
       if (formGroup) {
            const passwordControl = formGroup.get('Password'); // to get value in input tag
            const confirmPasswordControl = formGroup.get('Confirm'); // to get value in input tag

            if (passwordControl && confirmPasswordControl) {
                const password = passwordControl.value;
                const confirmPassword = confirmPasswordControl.value;
                if (password !== confirmPassword) { 
                    return { matchPassword: true };
                } else {
                    return null;
                }
            }
       }

       return null;
    }
}

然后我可以在像这样的表单构建器中使用它，非常类似于Angular的本机验证器：

this.registerForm = this.fb.group({ // <-- the parent FormGroup
            Email: ['', Validators.required ],
            Username: ['', Validators.required ],
            FirstName: ['', Validators.required ],
            Password: ['',
                            [
                                Validators.required,
                                Validators.minLength(6)
                            ]
                      ],
            Confirm: ['',
                            [
                                Validators.required,
                                PasswordValidation.MatchPassword
                            ]
                      ]
            });

角度反应形式密码验证匹配

1 个答案: