Angular中updateOn:submit策略下异步验证器导致需两次提交表单问题

当为表单字段设置updateOn: 'submit'时，异步验证器会在提交动作触发后才开始执行。而你的submitForm方法是同步判断this.signupForm.valid——第一次提交时，异步验证还在进行中，表单状态处于PENDING，此时valid为false，导致提交逻辑不执行。等异步验证完成、表单状态更新为VALID时，本次提交的逻辑已经走完，所以需要第二次操作才能触发提交。

方案1：监听表单状态变化，异步验证完成后执行提交逻辑 #

把提交逻辑抽离成单独方法，在submitForm中先标记所有字段为已触碰，再根据当前表单状态决定是直接执行提交，还是等待异步验证完成后再执行：

submitForm() {
  this.signupForm.markAllAsTouched();

  if (this.signupForm.status === 'PENDING') {
    // 监听状态变化，直到异步验证完成
    const statusSub = this.signupForm.statusChanges.subscribe(status => {
      if (status === 'VALID') {
        this.processFormSubmission();
        statusSub.unsubscribe(); // 取消订阅避免内存泄漏
      }
    });
  } else if (this.signupForm.valid) {
    this.processFormSubmission();
  }
}

// 抽离的提交逻辑
private processFormSubmission() {
  const user = this.signupForm.value;
  console.log(user);
  // 这里添加实际的表单提交逻辑，比如调用后端注册接口
}

方案2：使用async/await等待异步验证完成 #

通过手动触发每个控件的验证，并用Promise包裹等待状态变化，确保所有异步验证完成后再判断表单有效性：

async submitForm() {
  this.signupForm.markAllAsTouched();

  // 等待所有控件的异步验证完成
  await Promise.all(
    Object.values(this.signupForm.controls).map(control => {
      return new Promise(resolve => {
        if (!control.asyncValidator) {
          resolve(control.status);
          return;
        }

        // 触发控件验证
        control.updateValueAndValidity({ onlySelf: true });
        const sub = control.statusChanges.subscribe(status => {
          if (status !== 'PENDING') {
            resolve(status);
            sub.unsubscribe();
          }
        });
      });
    })
  );

  if (this.signupForm.valid) {
    const user = this.signupForm.value;
    console.log(user);
    // 执行后续提交逻辑
  }
}

• 方案1更轻量，利用Angular表单内置的状态监听机制，代码简洁，适合大多数场景。
• 方案2通过显式等待所有异步验证完成，逻辑更直观，但需要处理每个控件的验证状态，适合需要精确控制验证流程的场景。

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