表格中的Angular 2 Match密码

我知道这个问题曾以类似的形式被问过其他次，但情况略有不同。让我解释：

我有一个重置密码表格，其中包含3个字段（旧密码，新密码，确认密码）。当然，我需要检查所提交的密码是否等于submittedw confirmpassword，并且我想在单击“提交”之前执行此操作。我定义了如下形式（在component.ts中）

this.form = fb.group({
  // define your control in you form
  oldpassword: ['', Validators.required],
  password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],
  confirmPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]]
}, {
  validator: PasswordValidation.MatchPassword // your validation method
});

export class PasswordValidation {

static MatchPassword(AC: AbstractControl) {
    const password = AC.get('password').value; // to get value in input tag
    const confirmPassword = AC.get('confirmPassword').value; // to get value in input tag
    if (password !== confirmPassword) {
      AC.get('confirmPassword').setErrors({MatchPassword: true})
    } else {
        return null
    }
}
}  

这是问题所在，如果我在编译“新密码”之前更改“确认密码”字段，则该表格无效。换句话说，如果我尊重字段的垂直方向，那么一切都可以，但是如果我以不同的顺序编译字段，则该表格仍然无效。

这是html代码：（如您所见，这有点令人困惑，因为我还有其他UX约束ehich对应于用户可能的交互）

<form [formGroup]="form" novalidate (ngSubmit)="modal.open()">
        <div class="form-group">
          <label for="oldpassword">Inserisci vecchia password</label>
          <input type="password" id="oldpassword" class="form-control" formControlName="oldpassword">
          <div
            *ngIf="form.controls['oldpassword'].hasError('required') && form.controls['oldpassword'].touched"
            class="alert alert-danger">
            Campo obbligatorio
          </div>
        </div>
        <div class="form-group">
          <label for="password">Inserisci nuova password</label>
          <input type="password" id="password" class="form-control" formControlName="password">
          <div *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched"
               class="alert alert-danger">
            Campo obbligatorio
          </div>
          <div *ngIf="form.controls['password'].hasError('minlength') && form.controls['password'].touched"
               class="alert alert-danger">
            Lunghezza minima: 4 caratteri.
          </div>
        </div>
        <div class="form-group">
          <label for="confirmPassword">Ripeti nuova password</label>
          <input type="password" class="form-control" id="confirmPassword" formControlName="confirmPassword">
          <div class="alert alert-danger"
               *ngIf="form.errors?.MatchPassword || (form.controls['confirmPassword'].hasError('required') && form.controls['confirmPassword'].touched)">
            Le password non corrispondono
          </div>
        </div>
        <div *ngIf="!this.state.controlloIn; else elseBlock">
          <button type="submit" class="btn btn-primary btn-update" [disabled]="!form.valid || this.controlloInvia">
            Invia Richiesta
          </button>
        </div>
        <ng-template #elseBlock>
          <button type="submit" class="btn btn-primary btn-update" [disabled]="true">
            Invia Richiesta
          </button>
        </ng-template>
      </form>

我不是专家，所以如果您可以建议我其他最佳实践，我将非常高兴。谢谢大家