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>

Answer 1

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