无法以角度模板驱动形式验证两个验证条件

Question

我在用角度验证我的注册时遇到问题。这是我到目前为止所做的

<div class="register-photo">
<div class="form-container">
  <div class="image-holder"></div>
  <form method="post" #form=ngForm (ngSubmit)="onSubmit(form)">
    <h2 class="text-center"><strong>Create</strong> an account.</h2>
    <div class="form-group">
      <input class="form-control" type="text" name="fullname" required
      #fullname="ngModel" ngModel (blur)="nameValidate(fullname)"
       placeholder="Full name">
       <span class="err-msg d-block"  *ngIf="isNameInvalid && fullname.invalid && fullname.touched"> 
  {{nameErr}}</span>
    </div>
    <div class="form-group">
      <input class="form-control" type="password" name="password"
      #pword="ngModel" ngModel required minlength="8"
      placeholder="Password"  (blur)="pwordValidate(pword)">
      <span class="err-msg d-block" *ngIf="isPasswordInvalid && pword.invalid && pword.touched"> 
{{passwordErr}}</span>

    </div>
    <div class="form-group">
      <input class="form-control" type="password"
         #pwordR="ngModel" ngModel required minlength="8"
      name="password-repeat" placeholder="Password (repeat)" 
         (blur)="validateCpword(pwordR,pword)">
      <span class="err-msg d-block" *ngIf="isConfirmInvalid && pwordR.invalid &&
      pwordR.touched">{{pConfirmErr}}</span>
    </div>
    <div class="form-group">
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox">I agree to the license terms.
        </label>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-primary btn-block" type="submit"
      [disabled]="form.invalid">Sign Up</button>

    </div>
    <p></p>
    <a [routerLink]="['/login']" class="already">You already have an account? Login here.</a>
  </form>
</div>

ts file

import { Component, OnInit } from '@angular/core';
import { NgModel, NgForm } from '@angular/forms';
import {Router} from '@angular/router'

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  nameErr: string = ""
  passwordErr: string = ""
  pConfirmErr: string = ""
  isNameInvalid: boolean = false
  isPasswordInvalid: boolean = false
  isConfirmInvalid: boolean = false
  constructor(private router: Router) { }

  nameValidate(nameField:NgModel):void {
    if(nameField.invalid && nameField.touched) {
    this.nameErr = 'Name is required'
    this.isNameInvalid = true
    }
  }
  pwordValidate(password:NgModel): void {
    if(password.value.length < 1 && password.touched) {
      this.passwordErr = 'Password is required'
      this.isPasswordInvalid = true
    }
    if(password.dirty && password.value.length < 8) {
      this.passwordErr = 'Password must contain at least 8 characters'
      this.isPasswordInvalid = true
    }
  }

  validateCpword(pwordR: NgModel, pword:NgModel): void {
    if(pwordR.value.length < 1 && pwordR.touched) {
    this.pConfirmErr = 'confirm your password'
    this.isConfirmInvalid = true
    }
    if(pwordR.dirty && pword.value !== pwordR.value) {
      this.pConfirmErr ='Password do not match'
      this.isConfirmInvalid = true
     }

  }
  ngOnInit() {
  }

   onSubmit(form:NgForm) {
     if(form.valid) {
       this.router.navigate(['/'])
     }
   }
}

该表单可以很好地验证按钮，直到通过验证为止，按钮才被禁用。然后启用。问题是，当我返回并更改第一个密码以使密码字段不再匹配时，不会显示任何错误消息，实际上是启用了提交按钮并提交了表单。我该如何纠正这个问题。