How to detect changes in the bound form variable value in a custom form control (Angular 10)

user_7849203 0
Viewed 208

I've created an Angular custom form component that implements the ControlValueAccessor interface so it can be used like this:

<form [formGroup]="formModel">
  <my-custom-control formControlName="config_name"
    label="{{ 'INPUT_CONFIG.LABEL' | translate }}"></my-custom-control>

</form>

The component needs to do some logic whenever the config_name form variable changes. How could I detect this change inside the custom component (not the parent)?

I've tried implementing the OnChanges interface, but the SimpleChanges object received doesn't have any reference to the bound form variable.

Thanks in advance,

angular
3 Answers

I had the solution just before my eyes: the writeValue method implemented from the ControlValueAccessor does exactly what I need but I misunderstood the documentation. Now I can parse whatever value the custom form control gets:

writeValue(newValue: string) {
  if(newValue) {
    this.parseNameValue(newValue); // Do the needed logic to parse the value
  } else {
    this.value = '';
  }
}

Cheers,

user_78492030

Try this

this.formModel.get("config_name").valueChanges.subscribe(change => {
     // do something 
});
user_59641110

this should be posted in ngOnint:

ngOnInit(): void {
  this.formModel.get('config_name').valueChanges.subscribe(x => {
        
    console.log(this.form.get("id").value)
          
         
  })
}
user_80909810
Related