How to implement ControlValueAccessor on Angular's downgraded component

Question

I have an Angular component that implements a ControlValueAccessor , but the writeValue method writeValue never called with the initial value from ngModel .

template:

<my-comp [(ngModel)]="$ctrl.activeUser"></my-comp>

component downgrades to AngularJS via:

 .directive('myComp', downgradeComponent({ component: MyComp, inputs: [], outputs: [], })); 

I tried adding ngModel to inputs and outputs , but it does not work.

Answer 1

You should use the ng-model attribute instead of [(ngModel)] , for example: <my-comp ng-model="$ctrl.activeUser"></my-comp>

From the angular docs:

  * 3. `ng-model` is controlled by AngularJS and communicates with the downgraded Angular component * by way of the `ControlValueAccessor` interface from @angular/forms. Only components that * implement this interface are eligible. * * ## Supported Features * * - Bindings: * - Attribute: `<comp name="World">` * - Interpolation: `<comp greeting="Hello {{name}}!">` * - Expression: `<comp [name]="username">` * - Event: `<comp (close)="doSomething()">` * - ng-model: `<comp ng-model="name">`