OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Allow user to input numbers only no special character or alphabet in Angular text box

  • Thread starter Thread starter Paras Panchal
  • Start date Start date
P

Paras Panchal

Guest
I have an input field where the requirement is that it has 0 initially set on change of value that 0 is removed and number is added but that 0 is removed only if key pressed by user is a number now the issue arises that when I do use a input event it take my value as sing quoted string as '8' i had used replace method but what if I press backspace also on focus out it adds a .00 to a number if its there but i am also found a issue when my number is initially 0 and i press a nonnumberic value it makes my number set '' and also on backspace keypress it should allow backspace and remove zero but should not give an error when I remove the last not 0 number after typing something and do a backspace it gives error as Cannot read properties of null (reading 'replace') that is also case so its a mix of various cases

Code:
<input type="text" class="someclass" [readOnly]="isView || isEdit" placeholder=""
                        formControlName="somename" mask="separator.2" thousandSeparator="," (input)="removeZeroOnKeydown($event)"
                        (focusout)="onFixedAmount('somename')" separatorLimit="99999999999999">
                     <label class="label">Some Label$</label>

Code:
   removeZeroOnKeydown(event: InputEvent) {
    let inputElement = event.target as HTMLInputElement;

    //Get FormControl Name on keydown
    let controlName = inputElement.getAttribute('formControlName');
    
    if (!controlName) return;

    let control = this.myformname.controls[controlName];

    //Check Formcontrol input field value
    let controlValue = control.value;

    // If the input field only contains "0", replace it with the input data
    if (controlValue == 0 || controlValue == '') {

    //Get the keypressed value
    let inputData = (event as InputEvent).data;

    //let numberValue = inputData.replace(/'/g, "");
    
    if (inputData && /^\d$/.test(inputData.replace(/'/g, ""))) {

      //Set value of keypressed
      control.setValue(inputData);
    }
    else{
      if(controlValue == 0 && controlValue){
      control.setValue(0);
      }
      else if(!/^\d$/.test(inputData.replace(/'/g, "")) && controlValue != 0) {
        control.setValue('');
      }
    }
  }
}

 onFixedAmount(FormControlName) {
    let amount = this.myformname.controls[FormControlName].value;
    if (amount) {
      this.myformname.controls[FormControlName].setValue(amount ? Number(amount).toFixed(2) : 0);
    }
  }

<p>I have an input field where the requirement is that it has 0 initially set on change of value that 0 is removed and number is added but that 0 is removed only if key pressed by user is a number now the issue arises that when I do use a input event it take my value as sing quoted string as '8' i had used replace method but what if I press backspace also on focus out it adds a .00 to a number if its there but i am also found a issue when my number is initially 0 and i press a nonnumberic value it makes my number set '' and also on backspace keypress it should allow backspace and remove zero but should not give an error when I remove the last not 0 number after typing something and do a backspace it gives error as Cannot read properties of null (reading 'replace') that is also case so its a mix of various cases</p>
<pre><code><input type="text" class="someclass" [readOnly]="isView || isEdit" placeholder=""
formControlName="somename" mask="separator.2" thousandSeparator="," (input)="removeZeroOnKeydown($event)"
(focusout)="onFixedAmount('somename')" separatorLimit="99999999999999">
<label class="label">Some Label$</label>
</code></pre>
<pre><code>
removeZeroOnKeydown(event: InputEvent) {
let inputElement = event.target as HTMLInputElement;

//Get FormControl Name on keydown
let controlName = inputElement.getAttribute('formControlName');

if (!controlName) return;

let control = this.myformname.controls[controlName];

//Check Formcontrol input field value
let controlValue = control.value;

// If the input field only contains "0", replace it with the input data
if (controlValue == 0 || controlValue == '') {

//Get the keypressed value
let inputData = (event as InputEvent).data;

//let numberValue = inputData.replace(/'/g, "");

if (inputData && /^\d$/.test(inputData.replace(/'/g, ""))) {

//Set value of keypressed
control.setValue(inputData);
}
else{
if(controlValue == 0 && controlValue){
control.setValue(0);
}
else if(!/^\d$/.test(inputData.replace(/'/g, "")) && controlValue != 0) {
control.setValue('');
}
}
}
}

onFixedAmount(FormControlName) {
let amount = this.myformname.controls[FormControlName].value;
if (amount) {
this.myformname.controls[FormControlName].setValue(amount ? Number(amount).toFixed(2) : 0);
}
}
</code></pre>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top