Tuesday, 30 June 2020

Allow number's only in input text Angular-8

HTML:
<input type="text" (input)="onTextboxChangeValidate($event)">

TS(Component type script):
onTextboxChangeValidate(event: Event) {
    var inputData = (<HTMLInputElement>event.target).value;
    //replace more than one dot
    var extractedFte = inputData.replace(/[^0-9.]/g, '').replace('.', '')
    .replace(/\./g, '').replace('x', '.');

    //Extract number Values
    extractedFte = extractedFte.replace(/^(\d+)\d*$/, "$1");

    //Reasign to same control
    (<HTMLInputElement>event.target).value = extractedFte;
  }

Thursday, 25 June 2020

Allow 2 digit Decimal value from 0.01 to 100 validation in angular

Sample Outcomes: 0.01, 1,1.55,100

HTML:

<input type="text" maxlength="5" 
(focusout)="onTextboxFocusOutDecimalPercentageValidate($event)" 
(input)="onTextboxChangeDecimalPercentageValidate($event)">

TS:
onTextboxChangeDecimalPercentageValidate(event: Event) {
    var inputData = (<HTMLInputElement>event.target).value;
    //replace more than one dot
    var extractedFte = inputData.replace(/[^0-9.]/g, '').replace('.', 'x')
                      .replace(/\./g, '').replace('x', '.');
    //Extract Decimal Values
    extractedFte = extractedFte.replace(/^(\d+.?\d{0,2})\d*$/, "$1");
    //Reasign to same control
    (<HTMLInputElement>event.target).value = extractedFte;
    if (extractedFte != '' && Number(extractedFte) >= 100) {
      (<HTMLInputElement>event.target).value = '100'; extractedFte = '100';
    }
    // if (Number(extractedFte) == 0) {
    //   (<HTMLInputElement>event.target).value = ''; extractedFte = '';
    // }
  }
  onTextboxFocusOutDecimalPercentageValidate(event: Event) {
    var inputData = (<HTMLInputElement>event.target).value;
    //replace more than one dot
    var extractedFte = inputData.replace(/[^0-9.]/g, '').replace('.', 'x')
                      .replace(/\./g, '').replace('x', '.');
    //Extract Decimal Values
    extractedFte = extractedFte.replace(/^(\d+.?\d{0,2})\d*$/, "$1");
    //Reasign to same control
    (<HTMLInputElement>event.target).value = extractedFte;
    if (extractedFte != '' && Number(extractedFte) >= 100) {
      (<HTMLInputElement>event.target).value = '100'; extractedFte = '100';
    }
    if (Number(extractedFte) == 0) {
      (<HTMLInputElement>event.target).value = ''; extractedFte = '';
    }
  }