Angular组件初始化时FormControl无效、提交表单返回invalid空数据

问题根因梳理 #

• 自定义hasError校验状态判断方法无返回值：模板中*ngIf绑定的判断结果永远为假，无法正常显示错误提示，无法定位具体哪个字段校验不通过
• 密码一致性校验逻辑错误：校验器挂载在confirmNewPassword控件上，却在校验逻辑里读取confirmNewPassword本身的值做对比，等于没有做两次密码一致性校验
• presentPassword字段校验规则不完整：响应式表单不会读取HTML中写的原生pattern、required属性，仅给该字段的FormControl加了必填校验，没有加密码格式校验，和业务规则不符
• 确认密码的错误提示没有绑定显示条件，且未给表单加novalidate属性关闭浏览器原生校验，容易出现校验逻辑冲突

修复方案 #

第一步：修复TS代码逻辑

import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-change-password',
  templateUrl: './change-password.component.html',
  styleUrls: ['./change-password.component.scss']
})
export class ChangePasswordComponent implements OnInit {
  changePasswordForm!: FormGroup;
  newPasswordVisibility = false;
  presentPasswordVisibility = false;
  confirmNewPasswordVisibility = false;
  // 提前定义正则，避免重复编写
  private readonly passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/;

  constructor() {}

  ngOnInit(): void {
    this.initForm();
  }

  initForm = () => {
    this.changePasswordForm = new FormGroup({
      // 给当前密码补充格式校验
      presentPassword: new FormControl(null, [Validators.required, Validators.pattern(this.passwordPattern)]),
      newPassword: new FormControl(null, [
        Validators.required,
        Validators.pattern(this.passwordPattern),
      ]),
      confirmNewPassword: new FormControl(null, [
        Validators.required,
        this.matchPasswordValidator,
      ]),
    });
  };

  // 补充return返回校验结果
  hasError = (control: string, error: string) => {
    return this.changePasswordForm.controls[control].hasError(error);
  };

  // 修正校验逻辑，和newPassword字段做对比
  matchPasswordValidator = (control: AbstractControl) => {
    if (control && control.value) {
      const newPasswordControl = control.root.get('newPassword');
      if (newPasswordControl && control.value !== newPasswordControl.value) {
        return { mismatch: true };
      }
    }
    return null;
  };

  submit = () => {
    // 提交前先标记所有控件为已触碰，触发所有错误提示
    this.changePasswordForm.markAllAsTouched();
    console.log(this.changePasswordForm.value);
    if (this.changePasswordForm.valid) {
      console.log('valid');
      // 此处填写后续提交逻辑
    } else {
      console.log('Not valid');
    }
  };
}

第二步：修正HTML关键配置

<!-- 给form加novalidate关闭浏览器原生校验，避免和Angular校验冲突 -->
<form [formGroup]="changePasswordForm" (ngSubmit)="submit()" novalidate>
  <!-- 其余原有代码不变，仅修改确认密码的错误提示部分和提交按钮属性 -->
  <mat-error *ngIf="hasError('confirmNewPassword', 'required')">
    确认密码不能为空
  </mat-error>
  <mat-error *ngIf="hasError('confirmNewPassword', 'mismatch')">
    两次输入的密码不一致
  </mat-error>
  <!-- 提交按钮显式指定type="submit" 避免默认类型变更导致提交失效 -->
  <button type="submit" class="button-section" mat-raised-button>
    <span class="btn-text">Change</span>
  </button>
</form>

修复后表单会正常触发所有校验规则，错误提示可正常显示，提交时也会正确读取表单内的输入值。

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