Angular - controlValueAccessor method writeValue() not being called

Question

Angular Version: 6.1

I\'m trying to implement a custom control using what Kara Erickson is calling a Composite ControlValueAccessor as shown in the presentation, An

Answer 1

The purpose of writeValue is to inform your component about changes on the outside / the form control on parent component. What you'll usually want to do with it is to bind the change from outside to a local variable.

In order to inform the outside world about changes inside of your component, you need to call the onChange method. You can call it, like you would usually call an event emitter.

I've put together a couple of examples here: https://www.tsmean.com/articles/angular/angular-control-value-accessor-example/

Answer 2

writeValue is called when you are changing control value (eg by setting backing ngModel property or controll value) not by user input.

https://stackblitz.com/edit/angular-hu2bfs?file=src/app/app.module.ts

I have removed errors caused by misused ngModel

As you can see, if you type into extra input new value and push the button, writeValue is called.

to wrap it up - writeValue is called when controller changes model value, and writeValue purpose is to do required stuff to reflect model changes by custom control.