Password match validation in reactive form in Angular

Question

I have two inputs (newPassword and confirmPassword) which must be validated by matching them. I have resetPasswordFormGroup which is defined in reset-password.component.

When I use MustMatch custom validator in my formgroup I get this error. Actually, I'm confused about how to use the custom validator.

Argument of type '{ validator: (formGroup: FormGroup) => void; }' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions'. Object literal may only specify known properties, and 'validator' does not exist in type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions'.ts(2345)

resetPasswordFormGroup = new FormGroup({
        currentPassword: new FormControl(null, Validators.required),
        newPassword: new FormControl(null, Validators.required),
        confirmNewPassword: new FormControl(null, Validators.required),
    });

    get currentPasswordFormControl() {
        return this.resetPasswordFormGroup.get('currentPassword');
    }

    get newPasswordFormControl() {
        return this.resetPasswordFormGroup.get('newPassword');
    }

    get confirmNewPasswordFormControl() {
        return this.resetPasswordFormGroup.get('confirmNewPassword');
    }

        <form [formGroup]='resetPasswordFormGroup' (ngSubmit)="onPasswordChange()">
            <mat-card-content>
                <mat-form-field class="center-text">
                    <input matInput placeholder="please enter your current password" formControlName="currentPassword" />
                    <mat-error *ngIf="currentPasswordFormControl.hasError('required')">
                        <strong>current password</strong> is required
                    </mat-error>
                </mat-form-field>
                <mat-form-field class="center-text">
                    <input matInput placeholder="please enter your new password" formControlName="newPassword" />
                    <mat-error *ngIf="newPasswordFormControl.hasError('required')">
                        <strong> new password </strong> is required  
                    </mat-error>
                </mat-form-field>
                <mat-form-field class="center-text">
                    <input matInput placeholder="please confirm your new password"
                        formControlName="confirmNewPassword" />
                    <mat-error *ngIf="confirmNewPasswordFormControl.hasError('required')">
                         <strong> confirm new password</strong> is required
                    </mat-error>
                </mat-form-field>
            </mat-card-content>

            <mat-card-actions>
                <button mat-raised-button color="primary">
                    <div *ngIf="isSubmitting" class="loading">
                        <mat-spinner [diameter]="26" color="accent"></mat-spinner>
                    </div>
                    <span *ngIf="!isSubmitting">
                        submit
                    </span>
                </button>
            </mat-card-actions>
        </form>

Answer 1

That's not working for me, I tried multiple times but I couldn't figure out why it doesn't work. Finally, I did it in this way. Thank you, guys.

resetPasswordFormGroup: FormGroup;
matcher = new MyErrorStateMatcher();

    constructor(
        private router: Router,
        private apiService: AuthApiService,
        private authSerivce: AuthService,
        private snackbar: MatSnackBar,
        private formbuilder: FormBuilder
    ) {
        this.resetPasswordFormGroup = this.formbuilder.group({
            currentPassword: ['', Validators.required],
            newPassword: ['', Validators.required],
            confirmPassword: ['', Validators.required],
        }, { validator: this.checkPasswords });
    }


    checkPasswords(group: FormGroup) {
        const pass = group.controls.newPassword.value;
        const confirmPass = group.controls.confirmPassword.value;

        return pass === confirmPass ? null : { notSame: true };
    }

and the template codes for checking if the passwords match or not

        <form [formGroup]='resetPasswordFormGroup' (ngSubmit)="onPasswordChange()">
            <mat-card-content>

                <mat-form-field class="center-text">
                    <input matInput placeholder="please enter your current password" formControlName="currentPassword"/>
                    <mat-error *ngIf="resetPasswordFormGroup.hasError('required', 'currentPassword')">
                        current password is required</mat-error>
                </mat-form-field>

                <mat-form-field class="center-text">
                    <input matInput placeholder="please enter your new password" formControlName="newPassword"/>
                    <mat-error *ngIf="resetPasswordFormGroup.hasError('required', 'newPassword')">
                        new password is required
                    </mat-error>
                </mat-form-field>

                <mat-form-field class="center-text">
                    <input matInput placeholder=" please confirm your new password" formControlName="confirmPassword"/>
                    <mat-error *ngIf="resetPasswordFormGroup.hasError('notSame')">
                        your new passwords are not match
                    </mat-error>
                    <mat-error *ngIf="resetPasswordFormGroup.hasError('required', 'confirmPassword')">
                        confirm new password is required
                    </mat-error>
                </mat-form-field>

            </mat-card-content>
        </form>