Angular自定义FormControl含AsyncValidator首次点击提交无效问题

问题现象 #

使用自定义FormControl的Angular表单中，当该控件位于表单末尾时：

• 输入有效值且异步验证通过后，提交按钮显示启用，但首次点击无响应
• 点击输入框外失去焦点后，表单会重新验证，提交按钮会短暂禁用，再次点击才能触发提交逻辑

问题根源 #

自定义控件的异步验证状态更新没有及时同步到父表单，导致提交按钮启用时，父表单实际仍处于pending（异步验证未完全完成）状态，此时点击提交不会触发表单的submit事件。

解决方法 #

1. 完善自定义控件的ControlValueAccessor实现 #

确保自定义控件正确实现ControlValueAccessor接口，在值变化和失去焦点时及时通知父控件，并触发验证更新：

// 自定义控件组件代码
import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  value: string = '';
  onChange: (value: string) => void = () => {};
  onTouched: () => void = () => {};

  constructor(public ngControl: NgControl) {
    ngControl.valueAccessor = this;
  }

  writeValue(value: string): void {
    this.value = value;
  }

  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  handleInput(value: string) {
    this.value = value;
    this.onChange(value);
    // 触发控件验证状态更新，同步到父表单
    this.ngControl.control?.updateValueAndValidity({ emitEvent: true });
  }

  handleBlur() {
    this.onTouched();
  }
}

2. 明确提交按钮的禁用条件 #

在父表单模板中，提交按钮的禁用状态要同时包含表单invalid和pending状态，避免异步验证未完成时按钮提前启用：

<!-- 父表单模板 -->
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <!-- 其他表单控件 -->
  <app-custom-input formControlName="customField"></app-custom-input>
  <button type="submit" [disabled]="myForm.invalid || myForm.pending">提交</button>
</form>

3. 优化异步验证器的状态通知 #

如果自定义控件使用了异步验证器，确保验证器在状态变化时及时发出通知，比如使用of()或Observable的next()正确传递验证结果，避免状态延迟。

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