import { Component , Output , EventEmitter , forwardRef } from "@angular/core" ; import { ControlValueAccessor , NG_VALUE_ACCESSOR , AbstractControl , Validators , NG_VALIDATORS } from "@angular/forms" ; @ Component ( { selector : 'required-textbox' , template : `
        <input type="text" class="form-control" [value]="value" 
               (input)="onChange($event.target.value)" 
               (blur)="onTouched($event)" [disabled]="disabled" />
    ` , styleUrls : [ './component-styles.css' ] , providers : [ { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => RequiredTextboxComponent ) , multi : true } , { provide : NG_VALIDATORS , useExisting : forwardRef ( ( ) => RequiredTextboxComponent ) , multi : true } ] } ) export class RequiredTextboxComponent implements ControlValueAccessor { private onChange = ( _ ) => { } ; private onTouched = ( _ ) => { } ; value : string ; disabled = false ; constructor ( ) { } writeValue ( value ) { this . value = value ; } registerOnChange ( fn ) { this . onChange = fn ; } registerOnTouched ( fn ) { this . onTouched = fn ; } setDisabledState ( disabled ) { this . disabled = disabled ; } validate ( ctrl ) { return Validators . required ( ctrl ) ; } }