import { Directive , ElementRef , forwardRef , HostListener } from '@angular/core' ; import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ; @ Directive ( { selector : '[msInputUcfirst][formControlName],[msInputUcfirst][formControl],[msInputUcfirst][ngModel]' , providers : [ { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => InputUcfirstDirective ) , multi : true } ] } ) export class InputUcfirstDirective implements ControlValueAccessor { constructor ( public elementRef ) { } registerOnChange ( fn ) { this . onChange = fn ; } registerOnTouched ( fn ) { this . onTouched = fn ; } setDisabledState ( isDisabled ) { } writeValue ( value ) { this . elementRef . nativeElement . value = this . getUcFirst ( value ) ; } @ HostListener ( 'blur' ) onBlur ( ) { this . onTouched ( ) ; } @ HostListener ( 'input' , [ '$event' ] ) onInput ( event ) { const value = this . getUcFirst ( event . target . value ) ; this . elementRef . nativeElement . value = value ; this . onChange ( value ) ; } getUcFirst ( value ) { return typeof value === 'string' ? ( value . length ? value . charAt ( 0 ) . toUpperCase ( ) + value . slice ( 1 ) : '' ) : null ; } /**
     * On touched handler
     */ private onTouched = ( ) => { } ; /**
     * On change handler
     */ private onChange : ( value : string | null ) => void = ( ) => { } ; }