title: Can I access to formControl of my custom ControlValueAccessor in Angular 2+?
body: <p>I would like to create a custom form element with ControlValueAccessor interface in Angular 2+. This element would be a wrapper over a <code>&lt;select&gt;</code>. Is it possible to propagate the formControl properties to the wrapped element? In my case, the validation state is not getting propagated to nested select as you can see on the attached screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/GdYHF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GdYHF.png" alt="enter image description here"></a></p>
  
  <p>My component is available as following:</p>
  
  <pre><code>  const OPTIONS_VALUE_ACCESSOR: any = {
    multi: true,
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() =&gt; OptionsComponent)
    };
  
    @Component({
    providers: [OPTIONS_VALUE_ACCESSOR], 
    selector: 'inf-select[name]',
    templateUrl: './options.component.html'
    })
    export class OptionsComponent implements ControlValueAccessor, OnInit {
  
    @Input() name: string;
    @Input() disabled = false;
    private propagateChange: Function;
    private onTouched: Function;
  
    private settingsService: SettingsService;
    selectedValue: any;
  
    constructor(settingsService: SettingsService) {
    this.settingsService = settingsService;
    }
  
    ngOnInit(): void {
    if (!this.name) {
    throw new Error('Option name is required. eg.: &lt;options [name]="myOption"&gt;&lt;/options&gt;&gt;');
    }
    }
  
    writeValue(obj: any): void {
    this.selectedValue = obj;
    }
  
    registerOnChange(fn: any): void {
    this.propagateChange = fn;
    }
  
    registerOnTouched(fn: any): void {
    this.onTouched = fn;
    }
  
    setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
    }
    }
  </code></pre>
  
  <p>This is my component template:</p>
  
  <pre><code>&lt;select class="form-control"
    [disabled]="disabled"
    [(ngModel)]="selectedValue"
    (ngModelChange)="propagateChange($event)"&gt;
    &lt;option value=""&gt;Select an option&lt;/option&gt;
    &lt;option *ngFor="let option of settingsService.getOption(name)" [value]="option.description"&gt;
    {{option.description}}
    &lt;/option&gt;
    &lt;/select&gt;
  </code></pre>