2

As the user types into an input field I want everything else than numbers to be replaced with an empty string. Unfortunately the app doesn't detect that the ngModel has changed and only updates the variable balanceAmount when there is a number entered again. Is there a possibility to tell Angular that the ngModel has changed and should be updated?

HTML:

<input [ngModel]="balanceAmount" (ngModelChange)="onBalanceChange($event)" />

Typescript:

onBalanceChange(amount) {
    amount = amount.replace(/[^0-9\.]+/g, '');
    this.balanceAmount = amount;
}
maidi
  • 3,219
  • 6
  • 27
  • 55
  • 2
    it's not 100% clear what you are asking, but an empty string is `''`, not `undefined`. also, you are dong a `string` operation and then trying to make a comparison against an `integer`. even if it made sense to compare your `string` against `0`, that if statement will never be true, since you are replacing non digits, including the `-` symbol, making it impossible for the number to ever be negative. this whole function is flawed and unnecessary. – Claies May 11 '17 at 10:20
  • if you *really* are trying to limit user input to numbers, you should use `type="number"` in your input. the only caveats to that would be that the number can be negative, and it may allow `e` (which represents an exponential number). – Claies May 11 '17 at 10:29
  • I updated my question to clear what my point is. The function and if statement you are talking about are not part of my question. – maidi May 11 '17 at 10:29
  • they are *completely* related to the question, because without them, the function isn't even necessary (see my other comment). – Claies May 11 '17 at 10:30
  • there is a reason why I don't use `type = "number"` so if there are any other solutions it would be nice – maidi May 11 '17 at 10:30
  • 1
    and what reason to *not use a built in* do you have, exactly? if you *absolutely must* **reinvent the wheel**, then the first part of my comment still stands (use `''` not `undefined`). by the way, the *pseudocode* that you changed the function to, trying to prove the rest of the function wasn't relevant, will actually work, which only further proves that you aren't providing enough info here. – Claies May 11 '17 at 10:33
  • 1
    Possible duplicate of [How to add form validation pattern in angular2](http://stackoverflow.com/questions/34559212/how-to-add-form-validation-pattern-in-angular2). if using the HTML input restriction isn't an option, then use the `pattern` validator, rather than your own custom function that just evaluates a pattern anyway. – Claies May 11 '17 at 10:38

1 Answers1

2

To make sure user types only numbers (not allowing negative values):

<input type="number" min="0">

Like @Claies said, is better to use a built in functionality so you don't reinvent the wheel.

For detecting changes, you could use DoCheck(). Example:

export class myClass implements OnInit, DoCheck {
    private myModel: any;

    constructor() {
    }

    ngOnInit() {
    }

    ngDoCheck() {
        // Do whatever checks and controls on your model
        console.log('The listener listens to: ' + JSON.stringify(this.myModel));
        if (this.myModel.length > 0 || !this.myModel) {
            // Do something
        }
    }
}

By the way, the controls I did inside the if are totally random, just for demonstration.

SrAxi
  • 19,787
  • 11
  • 46
  • 65