Angular自定义控件：响应式表单中change事件为何未触发？

此前功能正常，近期发现使用Angular 11 + TypeScript 5.1.6开发的自定义Checkbox组件，在父组件模板中绑定的(change)事件从未触发。相关代码如下：

抽象值访问器类 #

@Directive()
export abstract class AbstractInputComponent implements OnChanges {

  @Input() public isReadOnly = false;

  protected innerValue: unknown = null;
  public registerOnChange(fn: any) { this.propagateChange = fn; }
  public registerOnTouched(fn: any) { this.propagateTouch = fn; }
  public propagateChange = (_: any) => { };
  public propagateTouch = (_: any) => { };

  public ngOnChanges(): void {
    if ( this.isReadOnly ) {
        this.propagateChange(this.value);
    }
    this.cdr.detectChanges();
  }

  public get value(): any {
    return this.innerValue;
  };

  @Input() public set value(value: any) {
    if ( value !== undefined ) {
        this.writeValue(value);
        this.propagateChange(this.innerValue);
        this.propagateTouch(true);
    }
  }

  public writeValue(value: any): void {
    if (value !== this.innerValue) {
        this.innerValue = this.normalize(value);
    }
  }
}

自定义Checkbox组件 #

@Component({
    selector: 'ultim-checkbox',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './checkbox-input.component.html',
    providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef( ()=> CheckboxInputComponent ),
          multi: true
        },
        {
          provide: NG_VALIDATORS,
          useExisting: forwardRef( ()=> CheckboxInputComponent ),
          multi: true
        }
      ]
})
export class CheckboxInputComponent extends AbstractInputComponent implements ControlValueAccessor, Validator  {
   constructor ( protected cdr: ChangeDetectorRef ) {
       super(cdr);
   }
}

父组件模板使用 #

<ultim-checkbox formControlName="isAdmin"
    (change)="setAdmin()"></ultim-checkbox>

可能的原因及解决方案 #

核心原因：组件未触发change输出事件 #

Angular的ControlValueAccessor仅负责表单模型与组件值的同步，不会自动触发组件层面的change事件。你的自定义组件没有将原生Checkbox的交互事件转化为组件的change输出，因此父组件绑定的(change)不会被调用。

具体原因分析 #

1. 缺少组件级的change事件发射器：自定义组件未定义@Output() change，即使原生Checkbox触发了change事件，也无法冒泡到组件外部。
2. 模板未绑定原生事件到组件逻辑：Checkbox模板中的原生<input type="checkbox">的change事件未被捕获，也没有通知组件更新值并触发输出。
3. 抽象类value setter直接同步模型，但未触发UI事件：通过表单模型更新值时，仅会调用propagateChange同步表单，不会触发UI层面的change事件；用户操作UI时，若未绑定事件处理逻辑，同样不会触发组件的change输出。

解决方案 #

1. 为自定义组件添加change输出，并绑定原生事件

   • 在CheckboxInputComponent中添加事件发射器：

     @Output() change = new EventEmitter<boolean>();
     
     onChange(event: Event) {
       const checkbox = event.target as HTMLInputElement;
       this.value = checkbox.checked;
       this.change.emit(checkbox.checked);
     }
     

   • 在组件模板（checkbox-input.component.html）中绑定原生Checkbox的change事件：

     <input 
       type="checkbox" 
       [checked]="value" 
       (change)="onChange($event)"
       [disabled]="isReadOnly"
     >
     

2. 修正值更新逻辑

   • 抽象类的writeValue仅负责更新内部值，避免在value setter中直接调用propagateTouch和propagateChange（外部主动设值场景除外），应由UI交互触发的onChange方法同步表单模型并触发事件。

3. 检查isReadOnly的影响

   • 若isReadOnly为true，需确保模板中的原生Checkbox被禁用，避免用户操作无响应的情况。

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