Angular响应式表单密码不匹配提示不显示问题排查

你的问题核心在于确认密码的不匹配提示逻辑错误，以及部分绑定和事件监听的疏漏。以下是具体问题和修复步骤：

核心问题点 #

1. 确认密码字段的错误提示依赖pas2.hasError('pattern')，但该字段并未设置pattern验证器，导致不匹配提示永远无法触发。
2. check变量（标记密码是否不匹配）未被用于控制错误提示的显示。
3. 仅在确认密码输入时触发验证，未监听原密码的修改，导致原密码变化后无法实时更新匹配状态。
4. 无效类绑定中直接调用checkPass函数，会在每次变更检测时重复执行，影响性能。

修复步骤 #

1. 修正checkPass函数（app.component.ts） #

优化逻辑，仅在两个字段都有值时判断是否匹配：

// Password confirmation function
checkPass(pas1: any, pas2: any) {
  // 仅当两个字段都有输入时才判断是否匹配
  if (pas1.value && pas2.value) {
    this.check = pas1.value !== pas2.value;
    console.log(this.check ? "Not matched" : "Matched");
  } else {
    this.check = false; // 任一字段为空时，不显示不匹配提示
  }
}

2. 修复密码输入框（app.component.html） #

移除重复属性，添加原密码修改时的验证触发：

<div class="form-group">
  <label>Password</label>
  <input type="text" class="form-control" placeholder="Password" 
         #pas1="ngModel" 
         [class.is-invalid]="pas1.invalid && (pas1.dirty || pas1.touched)" 
         pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{12,30})" 
         required 
         [(ngModel)]="user.pas1" 
         name="pas1"
         (keyup)="checkPass(pas1,pas2)"> <!-- 原密码修改时触发验证 -->
  <section *ngIf="pas1.invalid && (pas1.dirty || pas1.touched)">
      <small class="text-danger" *ngIf="pas1.hasError('required')">
          Password is <strong>required</strong>
      </small>
      <small class="text-danger" *ngIf="pas1.hasError('pattern')">
          Password must be at least <strong>12 characters long, must have a special character, a capital letter and a small letter</strong>
      </small>
  </section>
</div>

3. 修复确认密码输入框（app.component.html） #

修正无效类绑定和错误提示逻辑：

<div class="form-group">
  <label>Confirm Password</label>
  <input type="text" class="form-control" placeholder="Confirm Password" 
         #pas2="ngModel" 
         [class.is-invalid]="(pas2.invalid || check) && (pas2.dirty || pas2.touched)" 
         [(ngModel)]="user.pas2" 
         name="pas2" 
         (keyup)="checkPass(pas1,pas2)" 
         required>
  <section *ngIf="(pas2.invalid || check) && (pas2.dirty || pas2.touched)">
      <small class="text-danger" *ngIf="pas2.hasError('required')">
          <strong>Mandatory field</strong>
      </small>
      <small class="text-danger" *ngIf="check">
          <strong>Password did not match</strong>
      </small>
  </section>
</div>

修复后效果 #

• 字段未填写时，显示"mandatory field"提示。
• 确认密码与原密码不匹配时，显示"Password did not match"提示。
• 修改原密码后，确认密码的匹配状态会实时更新。
• 无效样式会正确应用在字段脏值/触摸状态下的错误场景。

内容的提问来源于stack exchange，提问作者AnkaDel