Update NgModel value using/from Directive Angular | Angular 2

dec-price.directive.ts

import {
  Directive,
  HostListener,
  ElementRef
} from '@angular/core';
import { NgControl, NgModel } from '@angular/forms';
import { Subscription } from 'rxjs';

@Directive({
  selector: '[myDirective]'
})
export class Mydirective {
  lastValue: string;

  constructor(
    private ngControl: NgControl,
    public ref: ElementRef
  ) {}


  @HostListener('input', ['$event']) onInput($event) {
    const ctrl = this.ngControl.control;
    var start = $event.target.selectionStart;
    var end = $event.target.selectionEnd;
    const _value = getPriceInDecimal($event.target.value);
    $event.target.value = _value;
    $event.target.setSelectionRange(start, end);
    $event.preventDefault();

    if (
      !this.lastValue ||
      (this.lastValue &&
        $event.target.value.length > 0 &&
        this.lastValue !== $event.target.value)
    ) {
      this.ngControl.control.setValue(_value);
    }
  }

}

// The below functions are only for extracting a numeric string with 2 max decimal inputs from a string
// Refer to the end of the file for the possbile cases
// Note: This is code is a combination of multiple anwswers from stackoverflow and whatnot, thanks :)

export function isNumeric(value) {
  return /^\d+$/.test(value);
}

export function getPriceInDecimal(value) {
  try {
    if (value === undefined || value === null) return '';

    const _value = value;
    let value2 = _value.replace(
      /[`~!@#$%^&*()_|+\-=?;:'",<>\{\}\[\]\\\/]/gi,
      ''
    );
    let _number;
    if (getCharacterCount(value2, '.') > 1) {
      const _numSplit = value2.split('.');
      value2 = _numSplit[0] + '.' + (_numSplit[1] ? _numSplit[1] : '0');
    }
    if (
      value2 &&
      value2.includes('.') &&
      value2.split('.').length > 0 &&
      !value2.split('.')[1] &&
      isNumeric(value2.split('.')[0])
    ) {
      _number = value2;
    } else {
      const _extracted = value2.match(/^[0-9]+(\.[0-9][0-9]?)?/gi);
      _number = _extracted ? _extracted.join() : _extracted;
    }
    if (
      !_number ||
      parseFloat(_number) === NaN ||
      (parseFloat(_number) as any) === 'NaN'
    ) {
      return '';
    } else {
      return _number;
    }
  } catch (error) {
    console.log(error);
  }
}

function getCharacterCount(_data, _key) {
  return _data.split(_key).length - 1;
}


console.log('case:1 - ', getPriceInDecimal('222'));
console.log('case:2 - ', getPriceInDecimal('22,000'));
console.log('case:3 - ', getPriceInDecimal('220,00'));
console.log('case:4 - ', getPriceInDecimal('222.22'));
console.log('case:5 - ', getPriceInDecimal('0.22'));
console.log('case:6 - ', getPriceInDecimal('0.223'));
console.log('case:7 - ', getPriceInDecimal('.223'));
console.log('case:8 - ', getPriceInDecimal('22..'));
console.log('case:9 - ', getPriceInDecimal('22.0.'));
console.log('case:10 - ', getPriceInDecimal('.'));
console.log('case:11 - ', getPriceInDecimal('22.'));