Value does not extend to user control using ControlValueAccessor

Question

I have this user control that includes a select component. But in my reactive form, meaning never spreads.

Can someone help me with this?

My user control:

const SOME_SELECT_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SomeSelectComponent), multi: true }; @Component({ selector: 'some-select', template: ` <select class="form-control"> <option value="" disabled>Bitte wählen sie einen Eintrag aus aus</option> <option *ngFor="let item of optionItems" value="{{ item.id }}"> {{ item.name }} </option> </select> `, providers: [SOME_SELECT_VALUE_ACCESSOR] }) export class SomeSelectComponent implements OnInit, ControlValueAccessor { private _value: any; @Input() optionItems: Array<OptionItem> = []; private onTouchedCallback: () => void; private onChangeCallback: (_: any) => void; ngOnInit(): void { } writeValue(obj: any): void { console.log(obj); if (this._value !== obj) { this._value = obj; } } registerOnChange(fn: any): void { this.onChangeCallback = fn; } registerOnTouched(fn: any): void { this.onTouchedCallback = fn; } } export interface OptionItem { key: String; value: String; } 

A plnkr: https://plnkr.co/edit/VNflDbpMm1VmfIHcMcXr?p=preview

Answer 1

Because you do not call onChangeCallback when changing the value:

 <select class="form-control" (change)="change(select.value)" #select> change(val) { this.onChangeCallback(val); } 

Now you can see the changed control value.

the second thing that you are missing is updating the selection box from model to template, in my plunker I also added a solution.

Working plunker: https://plnkr.co/edit/C5mwsDre8OCkWYCDOF4i?p=preview

Answer 2

Plunger example

 <select class="form-control" (change)="writeValue($event.target.value)"> 

Alternative approach

Plunger example

 <select class="form-control" [ngModel]="_value" (ngModelChange)="writeValue($event)"> <option [ngValue]="null" disabled>Bitte wählen sie einen Eintrag aus aus</option>