How to implement ControlValueAccessor on downgraded Angular component

Question

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

template:

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

the component is downgraded to AngularJS via:

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

I tried adding ngModel to inputs and outputs but it's not working.

Is it possible to get some more code?? Where is involved the usage and the definition of `writeValue`. Thanks. — Lorenzo Imperatrice, Feb 19 '18 at 12:47
Have you tried to initialize the `$ctrl.activeUser` to null and to assign his value after page rendering? — Luca Taccagni, Feb 22 '18 at 14:35

score 10 · Accepted Answer · answered Feb 26 '18 at 15:14

You should use ng-model attribute instead of [(ngModel)], like this: <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">`

How to implement ControlValueAccessor on downgraded Angular component

1 Answers1