Angular表单条件必填验证问题：初始加载时Mat Error提前显示的解决方案咨询

我看了你的问题，核心是动态添加必填验证后，未触碰的字段就显示了错误提示，这是因为默认调用updateValueAndValidity()时的参数设置可能触发了不必要的状态传播，再加上模板里的星号和错误提示条件没有动态控制导致的。下面给你几个可行的解决方案：

方案一：调整验证状态更新的参数，避免意外状态变更 #

当你动态设置验证器后，调用updateValueAndValidity()时默认会触发表单的事件传播和父组件的验证更新，虽然不会直接修改touched/dirty状态，但可能导致变更检测时的状态判断异常。修改你的setRequiredVlidations方法，指定仅更新当前控件且不触发事件：

setRequiredVlidations() {
  // 获取控件引用
  const firstNameCtrl = this.modelForm.get('firstName') as FormControl;
  const lastNameCtrl = this.modelForm.get('lastName') as FormControl;
  const companyNameCtrl = this.modelForm.get('companyName') as FormControl;

  // 设置必填验证器
  firstNameCtrl.setValidators(Validators.required);
  lastNameCtrl.setValidators(Validators.required);
  companyNameCtrl.setValidators(Validators.required);

  // 更新验证状态，仅作用于当前控件，不触发外部事件
  firstNameCtrl.updateValueAndValidity({ onlySelf: true, emitEvent: false });
  lastNameCtrl.updateValueAndValidity({ onlySelf: true, emitEvent: false });
  companyNameCtrl.updateValueAndValidity({ onlySelf: true, emitEvent: false });

  // 可选：如果需要同步表单组的整体状态，同样带参数调用
  this.modelForm.updateValueAndValidity({ emitEvent: false });
}

同时，为了模板里的状态判断更稳定，建议在组件里定义控件的getter属性，避免多次调用modelForm.get()导致的变更检测问题：

get firstNameControl() {
  return this.modelForm.get('firstName') as FormControl;
}

// 同理添加lastNameControl和companyNameControl的getter

然后修改模板里的错误提示条件：

<mat-error *ngIf="firstNameControl.hasError('required') && (firstNameControl.touched || firstNameControl.dirty)">
  First Name is required.
</mat-error>

方案二：动态控制必填星号和错误提示的显示时机 #

默认状态下这些字段不是必填的，所以标签里的*和错误提示都应该只在条件满足时显示。首先在组件里添加一个状态标记：

// 标记是否需要额外字段必填
isAdditionalFieldsRequired = false;

然后在接口返回成功时更新这个标记：

getStarted() {
  this.AccountRoleDetails = null;
  if (this.userService) {
    this.userService
      .getUserEmail(this.accountId, this.modelForm.value['emailAddress'])
      .subscribe(
        (res: any) => {
          if (res.isSuccess === true) {
            this.isAdditionalFieldsRequired = true;
            this.setRequiredVlidations();
          }
          // 其他逻辑...
        }
      );
  }
}

最后修改模板，动态控制星号和错误提示：

<mat-form-field class="full-width" appearance="fill" style="margin-top: 26px;">
  <mat-label>First Name {{ isAdditionalFieldsRequired ? '*' : '' }}</mat-label>
  <input matInput formControlName="firstName">
  <mat-error *ngIf="isAdditionalFieldsRequired && firstNameControl.hasError('required') && (firstNameControl.touched || firstNameControl.dirty)">
    First Name is required.
  </mat-error>
</mat-form-field>

这样初始状态下既不会显示星号，也不会触发错误提示，只有当条件满足且用户触碰/修改字段后才会提示。

方案三：使用条件验证器替代动态设置验证器 #

这种方法更简洁，初始时就给字段设置条件验证器，只有当标记为必填时才生效：

initFormGroup() {
  this.isAdditionalFieldsRequired = false;

  this.modelForm = this.formBuilder.group({
    id: [this.model.id || 0],
    emailAddress: [this.model.emailAddress, Validators.required],
    firstName: [this.model.firstName, [
      (control: AbstractControl) => {
        // 仅当需要时才应用必填验证
        return this.isAdditionalFieldsRequired ? Validators.required(control) : null;
      }
    ]],
    roleId: [this.model.roleId],
    lastName: [this.model.lastName, [
      (control: AbstractControl) => {
        return this.isAdditionalFieldsRequired ? Validators.required(control) : null;
      }
    ]],
    phoneNumber: [this.model.phoneNumber],
    companyName: [this.model.companyName, [
      (control: AbstractControl) => {
        return this.isAdditionalFieldsRequired ? Validators.required(control) : null;
      }
    ]],
  });
}

然后在接口返回成功时，只需更新标记并同步表单状态即可：

getStarted() {
  this.AccountRoleDetails = null;
  if (this.userService) {
    this.userService
      .getUserEmail(this.accountId, this.modelForm.value['emailAddress'])
      .subscribe(
        (res: any) => {
          if (res.isSuccess === true) {
            this.isAdditionalFieldsRequired = true;
            // 同步表单验证状态，不触发事件
            this.modelForm.updateValueAndValidity({ emitEvent: false });
          }
          // 其他逻辑...
        }
      );
  }
}

这种方式不需要动态修改验证器，逻辑更清晰，也减少了状态异常的可能性。

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