Hello,

I saw the SelectControlValueAccessor contains a map with the option's value as key and the ngValue as map's value.

The map is filled with standard SelectControlValueAccessor component, but not with my custom select component.

I'm trying to have a custom select component that detect changes that are done in the data model.

            <reactive-select [(ngModel)]="bindedDataInModel" (ngModelChange)="aMethod($event)">
                <option [ngValue]="null"></option>
                <option [ngValue]="i" *ngFor="let selectVal of allSelectValue; let i = index">{{allSelectValue[i]}}</option>
            </reactive-select>

If I use a select instead of my reactive-select custom component, ngValue is taken into account to the ngValue is returned when I select an option. But with my reactive-select ngValue is not taken into account and it is the displayed data that is returned.

For example if I select the first option it returns null with a select native component but it returns "" with my reactive-select custom component.

I see select value selector's option map, that link options id with option values is not filled with my custom component.

I successfully created a custom input or checkbox component, but could not create that custom select component because of the not detected [ngValue] property.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ X ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Value returned by my custom select component does not returns the ngValue.

Expected behavior

Value returned by my custom select component should behave like a select component.

Minimal reproduction of the problem with instructions

Create a component:

@Component(
{
  selector: 'reactive-select',
  template: `<select [(ngModel)]="value"><ng-content></ng-content></select>`,
  providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ReactiveSelectComponent), multi: true } ]
})
export class ReactiveSelectComponent extends SelectControlValueAccessor
{
  constructor( private _cdRef: ChangeDetectorRef, _renderer: Renderer, _elementRef: ElementRef ) { super( _renderer, _elementRef ) ;}

  // change from the model
  writeValue(value: any): void
  { ...
}}

What is the motivation / use case for changing the behavior?

Having a component that detects changes from the model, by overriding 'writeValue' method of the SelctControlValueAccessor.

Environment

Browser:

• [X ] Chrome (desktop) version 63.0.3239.132 (64 bits)
• Chrome (Android) version XX
• Chrome (iOS) version XX
• Firefox version XX
• Safari (desktop) version XX
• Safari (iOS) version XX
• IE version XX
• Edge version XX

For Tooling issues:

• Node version: v8.4.0
• Platform: Windows 7