ng2-ui-kit/src/components/input/input.component.ts

Angular2 UI Kit

import { Component, ElementRef, forwardRef, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

export const INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => InputComponent),
  multi: true
};

@Component({
  selector: 'ui-kit-input',
  templateUrl: './input.component.html',
  styleUrls: ['../../../styles/css/input.css'],
  providers: [INPUT_CONTROL_VALUE_ACCESSOR]
})
export class InputComponent {
  @Input() required: boolean = false;
  @Input() placeholder: string = '';
  @Input() type: string = '';
  @Input() prefix: string = '';
  @Input() label: string = '';
  @Input() inputType: string = 'text';

  private el: Element;
  private active: boolean = false;
  private classList: DOMTokenList;
  private internalValue: any;

  private onTouchedCallback: () => void = () => { };
  private onChangeCallback: (_: any) => void = () => { };

  get value(): any {
    return this.internalValue;
  };

  set value(value: any) {
    this.internalValue = value;
    this.onChangeCallback(value);
  }

  constructor(elementRef: ElementRef) {
    this.el = elementRef.nativeElement;
  }

  modelChange(data: any) {
    this.classList = this.el.classList;
    this.value = data;
  }

  writeValue(value: any) {
    this.internalValue = value;
  }

  onBlur() {
    this.active = false;
    this.onTouchedCallback();
  }

  registerOnChange(fn: any) {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouchedCallback = fn;
  }
}