Как показать подтверждение пароля, если только оригинальный пароль грязный

Question

Как только я начну печатать что-либо из имени пользователя, введите, как показано на рисунке ниже. Он показывает confirm password field недействительным. Чего я хочу добиться, так это того, что хочу видеть это только тогда, когда я начинаю печатать что-то из поля password или confirm password вместо отображения, когда я начинаю печатать из первого поля ввода, которое вызывается dirty form.

Описательное изображение

Форма

<mat-form-field>
    <mat-label>New Password</mat-label>
    <input matInput type="password" placeholder="New Password"  formControlName="password" autocomplete="off" />
    <mat-error *ngIf="isControlHasError('password','required')">
        <strong>{{ 'AUTH.VALIDATION.REQUIRED_FIELD' | translate }}</strong>
    </mat-error>
    <mat-error *ngIf="isControlHasError('password','minlength')">
        <strong>{{ 'AUTH.VALIDATION.MIN_LENGTH_FIELD' | translate }} 4</strong>
    </mat-error>
    <mat-error *ngIf="isControlHasError('password','maxlength')">
        <strong>{{ 'AUTH.VALIDATION.MAX_LENGTH_FIELD' | translate }} 20</strong>
    </mat-error>
</mat-form-field>
<mat-form-field>
    <mat-label>Confirm New Password</mat-label>
    <input matInput type="password" placeholder="Confirm New Password"  [errorStateMatcher]="matcher" formControlName="confirmPassword" autocomplete="off" />
    <mat-error *ngIf="isControlHasError('confirmPassword','required')">
        <strong>{{ 'AUTH.VALIDATION.REQUIRED_FIELD' | translate }}</strong>
    </mat-error>
    <mat-error *ngIf="isControlHasError('confirmPassword','minlength')">
        <strong>{{ 'AUTH.VALIDATION.MIN_LENGTH_FIELD' | translate }} 4</strong>
    </mat-error>
    <mat-error *ngIf="isControlHasError('confirmPassword','maxlength')">
        <strong>{{ 'AUTH.VALIDATION.MAX_LENGTH_FIELD' | translate }} 20</strong>
    </mat-error>
    <mat-error *ngIf="forgotPasswordForm.hasError('notSame')    ">
        <strong>Password do not match</strong>
    </mat-error>
</mat-form-field>

Файл TS

// Angular
import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormGroupDirective, FormControl, NgForm } from '@angular/forms';
import { Router } from '@angular/router';
// RxJS
import { finalize, takeUntil, tap } from 'rxjs/operators';
import { Subject } from 'rxjs';
// Translate
import { TranslateService } from '@ngx-translate/core';
// Auth
import { AuthNoticeService, AuthService } from '../../../../core/auth';
import { ErrorStateMatcher } from '@angular/material/core';





export class MyErrorStateMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        const invalidCtrl = !!(control && control.invalid && control.parent.dirty);
        const invalidParent = !!(control && control.parent && control.parent.invalid && control.parent.dirty);

        return (invalidCtrl || invalidParent);
    }
}


@Component({
    selector: 'kt-forgot-password',
    templateUrl: './forgot-password.component.html',
    encapsulation: ViewEncapsulation.None
})
export class ForgotPasswordComponent implements OnInit, OnDestroy {
    // Public params
    forgotPasswordForm: FormGroup;
    loading = false;
    errors: any = [];

    private unsubscribe: Subject<any>; // Read more: => https://brianflove.com/2016/12/11/anguar-2-unsubscribe-observables/
    matcher = new MyErrorStateMatcher();

    constructor(
        private authService: AuthService,
        public authNoticeService: AuthNoticeService,
        private translate: TranslateService,
        private router: Router,
        private fb: FormBuilder,
        private cdr: ChangeDetectorRef
    ) {
        this.unsubscribe = new Subject();
    }


    ngOnInit() {
        this.initRegistrationForm();
    }


    ngOnDestroy(): void {
        this.unsubscribe.next();
        this.unsubscribe.complete();
        this.loading = false;
    }

    initRegistrationForm() {
        this.forgotPasswordForm = this.fb.group({
            email: ['', Validators.compose([
                Validators.required,
                Validators.email,
                Validators.minLength(3),
                Validators.maxLength(320)
            ])
            ],
            username: ['', Validators.compose([
                Validators.required,
                Validators.minLength(4),
                Validators.maxLength(320)
            ])
            ],
            password: ['', Validators.compose([
                Validators.required,
                Validators.minLength(4),
                Validators.maxLength(100)
            ])
            ],
            confirmPassword: ['', Validators.compose([
                Validators.required,
                Validators.minLength(4),
                Validators.maxLength(100)
            ])
            ]

        }, { validator: this.checkPasswords });
        //{ validator: this.checkPasswords });
    }
    checkPasswords(group: FormGroup) { // here we have the 'passwords' group
        let pass = group.get('password').value;
        let confirmPass = group.get('confirmPassword').value;

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

    isControlHasError(controlName: string, validationType: string): boolean {
        const control = this.forgotPasswordForm.controls[controlName];
        if (!control) {
            return false;
        }

        const result =
            control.hasError(validationType) &&
            (control.dirty || control.touched);
        return result;
    }
}