响应式表单中FormGroup对象与valid属性不一致问题

异步验证器的执行是异步操作，updateValueAndValidity()只是触发验证流程，但不会等待异步验证完成：

• 直接打印this.form.valid时，异步验证还在执行中，表单状态处于PENDING，拿到的即时值是false。
• 控制台打印整个FormGroup对象时，因为浏览器控制台是实时引用展示，当你点击展开查看属性时，异步验证已经完成，所以看到的valid是true。

通过监听表单的statusChanges observable，等待异步验证完成后再获取正确的valid状态：

save() {
  this.form.addAsyncValidators([FormValidator.validate()]);
  // 更新表单状态并触发事件
  this.form.updateValueAndValidity({ emitEvent: true });

  this.form.statusChanges.pipe(
    // 过滤掉验证中的状态
    filter(status => status !== 'PENDING'),
    // 只取一次结果后取消订阅，避免内存泄漏
    take(1)
  ).subscribe(() => {
    console.log(this.form.valid); // 此时能拿到正确的验证结果
    // 在这里执行表单保存逻辑
  });
}

补充写法（async/await风格） #

如果习惯用异步语法，也可以结合firstValueFrom处理：

async save() {
  this.form.addAsyncValidators([FormValidator.validate()]);
  this.form.updateValueAndValidity({ emitEvent: true });

  // 等待验证状态不再是PENDING
  await firstValueFrom(
    this.form.statusChanges.pipe(filter(status => status !== 'PENDING'), take(1))
  );

  console.log(this.form.valid);
  // 执行保存逻辑
}

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