Update onChange for ControlValueAccessor on signal value change

[acoustic cloak]

I have a switch component that implements ControlValueAccessor (to implement custom form control to use in reactive form). Tried to refactor it using signal.

checked = model(false);

constructor() {
  effect(() => {
    this.onChange(this.checked());
    this.checkedChange.emit(this.checked());
  });
}

writeValue(value: boolean): void {
  this.checked.set(value);
}

I'm running into error where this control will set form dirty on init. This is because effect detect checked signal is updated in writeValue function. What is suggested pattern to update form value change?

[acoustic cloak]

Anyone maybe have some clue on this?

[turbid plume]

Why convert to signal? Team will provide better apis of signal form in future.

[steel coral]

I would recommend to no rely on effects to call onChange (like you said, writeValue function will trigger the effect and you don’t want that to happen). Instead use regular outputs on your html switch associated with a method « switchChecked » and another method « switchUnchecked ». The purpose of those two is to set the new value and call the onChange. Effects are great but doesn’t serve all purpose

[acoustic cloak]

I see, thanks for replying guys. I'll wait a bit more to see how form will be changed in future.

As to Mikastark, this component part of our design system, and can be used in a data-driven genereated angular reactive form. Hence we need to make it implement ControlValueAccess.