如何解决Angular表单需触发两次才能让父组件捕获事件的问题？

我做了一个Angular应用，里面有个可增减数量的表单组件，碰到个奇怪的问题：

• 加载表单时预填数量为1
• 父组件传了FormControl给子组件，用户点增减按钮时用patchValue更新值，按说父组件订阅的valueChanges应该能立刻捕获到变更
• 但现在必须连续点两次增减，父组件的订阅才会触发；第一次触发后，后面的操作就都正常了

我试过去掉ngOnInit里的emitEvent: false，但问题还是存在。

父组件代码 #

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Counter],
  template: `<h1>Counter</h1>
  <Counter [value]="1" [control]="qtyForm"></Counter>
  <p>Value from form emission:</p>
  <p>{{newQuantity}}</p>`,
})
export class App implements AfterViewInit {
  newQuantity!: number | null;
  qtyForm = new FormControl(0, [Validators.required, Validators.max(99)]);

  ngAfterViewInit() {
    this.updateCustomQuantity();
  }
  updateCustomQuantity() {
    this.qtyForm.valueChanges
      .subscribe((qty) => {
        this.newQuantity = qty;
      });
  }
}

子组件（Counter）代码 #

@Component({
  selector: 'Counter',
  standalone: true,
  imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule],
  template: `
    <p>Need to increment/decrement twice before form emits:</p>
    <button (click)="decrement()">Subtract</button>
    <mat-form-field>
      <input matInput [formControl]="control">
    </mat-form-field>
    <button (click)="increment()">Add</button>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => Counter),
      multi: true,
    },
  ],
  encapsulation: ViewEncapsulation.None,
})
export class Counter implements ControlValueAccessor, OnInit {
  formControlDirective!: FormControlDirective;
  currentValue!: number | null | undefined;
  @Input() value!: number;
  @Input() control!: FormControl;
  ngOnInit() {
    this.control.patchValue(this.value, { emitEvent: false });
    this.currentValue = this.value;
  }
  
  increment() {
    const currentValue = this.control.value;
    this.control.patchValue(currentValue + 1);
  }

  decrement() {
    const currentValue = this.control.value;
    this.control.patchValue(currentValue - 1);
  }
// 省略ControlValueAccessor接口的默认实现代码
}

问题根源 #

这个问题的核心是双重表单控件绑定冲突加上订阅时机的时序问题：

1. 子组件同时实现了ControlValueAccessor（把组件本身变成表单控件），又直接接收父组件的FormControl绑定到内部input，这会导致Angular的表单变更检测逻辑混乱，值变更事件被拦截或延迟触发。
2. 父组件在ngAfterViewInit才订阅valueChanges，而子组件在ngOnInit就已经修改了FormControl的值，后续第一次手动变更时，冲突的表单逻辑导致事件没有正常传递到父组件的订阅。

解决办法 #

1. 移除冗余的ControlValueAccessor实现

既然子组件已经直接使用父组件传入的FormControl，完全不需要实现ControlValueAccessor，这部分代码属于冗余且冲突的内容：

• 删除子组件providers中的NG_VALUE_ACCESSOR配置
• 去掉ControlValueAccessor接口实现，以及相关的未完成方法（比如writeValue、registerOnChange等）

2. 优化订阅时机（可选）

把父组件的订阅移到ngOnInit，确保在子组件初始化前就完成订阅，避免错过任何值变更事件。

修改后的代码

子组件

@Component({
  selector: 'Counter',
  standalone: true,
  imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule],
  template: `
    <button (click)="decrement()">Subtract</button>
    <mat-form-field>
      <input matInput [formControl]="control">
    </mat-form-field>
    <button (click)="increment()">Add</button>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class Counter implements OnInit {
  @Input() initialValue!: number;
  @Input() control!: FormControl;
  
  ngOnInit() {
    this.control.patchValue(this.initialValue);
  }
  
  increment() {
    const currentValue = this.control.value ?? 0;
    this.control.patchValue(currentValue + 1);
  }

  decrement() {
    const currentValue = this.control.value ?? 0;
    this.control.patchValue(Math.max(0, currentValue - 1)); // 防止数量变成负数
  }
}

父组件

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Counter],
  template: `<h1>Counter</h1>
  <Counter [initialValue]="1" [control]="qtyForm"></Counter>
  <p>Value from form emission:</p>
  <p>{{newQuantity}}</p>`,
})
export class App implements OnInit {
  newQuantity!: number | null;
  qtyForm = new FormControl(0, [Validators.required, Validators.max(99)]);

  ngOnInit() {
    this.updateCustomQuantity();
  }
  
  updateCustomQuantity() {
    this.qtyForm.valueChanges
      .subscribe((qty) => {
        this.newQuantity = qty;
      });
  }
}

修改后，第一次点击增减按钮时，父组件的newQuantity会立刻更新，无需重复操作两次。

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