Angular中updateValueAndValidity未更新表单值问题咨询

我在ngOnInit中将表单控件的updateOn设置为"blur"，代码如下：

this.formStepper = this._fb.group({
  steps: this._fb.array([
    this._fb.group({
      email: [
        this.formDataMail.dataValue,
        {
          updateOn: 'blur',
          validators: [Validators.required, Validators.email],
        },
      ],
    }),
    new FormGroup({}),
  ]),
});

为了在用户输入时手动触发验证，我在ngAfterViewInit中编写了输入框的keyup监听逻辑，调用updateValueAndValidity()：

fromEvent(this.emailInput.nativeElement, 'keyup')
  .pipe(
    filter(Boolean),
    debounceTime(600),
    distinctUntilChanged(),
    tap((_) => {
      this.formArray.at(0).get('email').updateValueAndValidity();
    })
  )
  .subscribe();

按预期这应该同步表单值并触发验证，但实际表单值在输入框触发blur前始终为null，就连valueChanges也只有在blur时才会收到更新：

this.formArray
  .at(0)
  .valueChanges.pipe(
    takeUntil(this._onDestroy$),
    tap((changes: string ) => {
      // 即使调用updateValueAndValidity，changes值仍仅在blur时同步
    })
  )
  .subscribe();

为什么updateValueAndValidity()没有按预期更新表单值？

作为临时解决方案，我尝试手动同步输入框值到表单控件，标记为脏状态后再触发验证，这样能在首次blur前显示错误信息：

fromEvent(this.emailInput.nativeElement, 'keyup')
  .pipe(
    filter(Boolean),
    debounceTime(600),
    distinctUntilChanged(),
    tap((_) => {
      this.formArray
        .at(0)
        .get('email')
        .setValue(this.emailInput.nativeElement.value);
      this.formArray.at(0).get('email').markAsDirty();
      this.formArray.at(0).get('email').updateValueAndValidity();
    })
  )
  .subscribe();

原因解析 #

当你给表单控件设置updateOn: 'blur'时，Angular会延迟将视图（输入框）的最新值同步到模型（FormControl）——只有当控件失去焦点时，才会完成视图到模型的值同步。

而updateValueAndValidity()的作用仅仅是重新计算控件的验证状态和相关属性（如valid、invalid、dirty等），它并不会主动把输入框的当前值同步到表单模型里。所以在blur触发前，模型值还是初始值或上次blur时的旧值，调用这个方法自然不会改变模型值，valueChanges也不会触发。

优化后的解决方案 #

可以先把邮箱控件存为组件变量，避免重复调用get('email')，同时确保订阅清理防止内存泄漏：

// 组件内定义变量
private emailControl!: FormControl;

ngOnInit() {
  // 单独创建邮箱控件，方便后续调用
  this.emailControl = this._fb.control(this.formDataMail.dataValue, {
    updateOn: 'blur',
    validators: [Validators.required, Validators.email]
  });

  this.formStepper = this._fb.group({
    steps: this._fb.array([
      this._fb.group({ email: this.emailControl }),
      new FormGroup({}),
    ]),
  });
}

ngAfterViewInit() {
  fromEvent(this.emailInput.nativeElement, 'keyup')
    .pipe(
      filter(Boolean),
      debounceTime(600),
      distinctUntilChanged(),
      tap(() => {
        // 手动同步输入框值到表单模型
        const inputValue = this.emailInput.nativeElement.value;
        this.emailControl.setValue(inputValue);
        // 触发验证，emitEvent设为true会触发valueChanges
        this.emailControl.updateValueAndValidity({ onlySelf: true, emitEvent: true });
      }),
      takeUntil(this._onDestroy$) // 清理订阅，避免内存泄漏
    )
    .subscribe();
}

这种方式既保留了updateOn: 'blur'的默认行为，又能在用户输入时主动同步值并触发验证。

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