聚焦物理地址输入框时复制地址，表单控件为何被设为null？

问题根源 #

当物理地址输入框处于聚焦状态时，点击复制按钮后搜索控件先被正确设置又变回null，核心原因是Angular表单控件在聚焦状态下的事件触发机制与组件内searchControl和表单控件的同步逻辑冲突：

• 程序通过按钮触发表单值复制时，会先设置searchControl和表单值；
• 但此时输入框处于聚焦状态，Angular的表单控件或自动完成组件会触发input/valueChanges等原生/框架事件，组件内的同步逻辑（比如监听表单值变化重置searchControl）会覆盖之前设置的值。

解决方案 #

1. 复制时先让输入框失焦，避免触发额外事件 #

在父组件的复制方法中，先获取物理地址输入框的DOM元素并失焦，完成复制操作后再按需恢复聚焦：

copyMailingToPhysical() {
  // 获取物理地址输入框元素并失焦
  const physicalInput = document.querySelector('#physical-address-input') as HTMLInputElement;
  physicalInput?.blur();

  // 复制邮件地址的值到物理地址
  const mailingAddressValue = this.mailingAddressForm.value;
  this.physicalAddressForm.patchValue(mailingAddressValue);
  
  // 同步搜索控件的值
  this.physicalAddressSearchControl.setValue(this.mailingAddressSearchControl.value);

  // 可选：如果需要恢复聚焦
  setTimeout(() => physicalInput?.focus(), 0);
}

2. 优化组件内的同步逻辑，区分用户输入与程序赋值 #

在AddressInputComponent中，监听表单控件值变化时，判断是否为用户手动输入导致的变化，避免程序赋值时触发searchControl重置：

private isUserInput = false;

ngOnInit() {
  this.addressLine1Control = this.formGroup.get('addressLine1') as FormControl;
  
  // 仅当用户输入时更新searchControl
  this.addressLine1Control.valueChanges.pipe(
    filter(() => this.isUserInput)
  ).subscribe(value => {
    this.searchControl.setValue(value);
  });

  // 监听输入框input事件，标记为用户输入
  this.inputElement.nativeElement.addEventListener('input', () => {
    this.isUserInput = true;
  });
}

// 程序赋值时标记为非用户输入
setFormValue(value: any) {
  this.isUserInput = false;
  this.formGroup.patchValue(value);
}

3. 使用emitEvent: false更新表单值，避免触发valueChanges #

复制表单值时，通过patchValue的emitEvent参数禁用事件触发，防止组件内的同步逻辑被意外触发：

copyMailingToPhysical() {
  const mailingAddressValue = this.mailingAddressForm.value;
  // 禁用事件触发，避免组件内valueChanges监听执行
  this.physicalAddressForm.patchValue(mailingAddressValue, { emitEvent: false });
  
  // 手动同步搜索控件的值
  this.physicalAddressSearchControl.setValue(this.mailingAddressSearchControl.value);
}

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