Angular reactive forms password validate match

Question

I'm trying to validate on the confirm password if both passwords match but I can't get the value of the password

this console.log(this.form) prints

but I can't access to the password.value if I do

console.log(this.form.controls)

or 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 I'm testing with the custom varible that I created

<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 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

bgraham bgraham · Accepted Answer · 2017-10-10T14:03:48

I think you can call form.get('NameOfField') to get a reference to the field's you are trying to compare.

I've got a slightly different answer to the way to validate matching password you might consider though:

I put my validator method in a separate class as a static method.

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;
    }
}

Then I can use it in a form builder like this, very similar to Angular's native validators:

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
                            ]
                      ]
            });

Angular reactive forms password validate match

1 Answers