import {Component, Input, Provider, forwardRef} from "@angular/core"; import {ControlValueAccessor, NG_VALUE_ACCESSOR, CORE_DIRECTIVES} from "@angular/common"; import {VertxService} from "../services/VertxService"; const noop = () => { }; const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = new Provider( NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => TaalComponent), multi: true }); @Component({ selector: 'taal', template: `<select [(ngModel)]="value"> <option [value]=""></option> <option *ngFor="let o of options" [value]="o.code">{{o.value}}</option> </select><ng-content></ng-content>`, directives: [CORE_DIRECTIVES], providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, VertxService], }) export class TaalComponent implements ControlValueAccessor { options = []; constructor(vertxService:VertxService) { var opt = this; vertxService.send('***', { action: 'languages', security: { user: '***', token: '***' } }, function (error, reply) { opt.options = reply.body.result; }); } //The internal data model private _value:any = ''; //Placeholders for the callbacks private _onTouchedCallback:(_:any) => void = noop; private _onChangeCallback:(_:any) => void = noop; //get accessor get value():any { return this._value; }; //set accessor including call the onchange callback set value(v:any) { if (v !== this._value) { this._value = v; this._onChangeCallback(v); } } //Set touched on blur onTouched() { this._onTouchedCallback(); } //From ControlValueAccessor interface writeValue(value:any) { this._value = value; } //From ControlValueAccessor interface registerOnChange(fn:any) { this._onChangeCallback = fn; } //From ControlValueAccessor interface registerOnTouched(fn:any) { this._onTouchedCallback = fn; } }

<select [(ngModel)]="value" class="form-control" required> <option [value]=""></option> <option [value]=""></option> <option [value]=""></option> <option [value]=""></option> </select>