How to prevent invalid data in Angular without form features

Question

I am using Angular and I want to easely validate a number input. I want that when the user type a value out of range in an input( below 1 and greater than 99) the Input doesn't change. I don't want to use forms.

I have designed a component that displays dynamic data in several parts, I achieved it without using the form facilities of Angular. The only issue left is that the user cannot enter values below 1 and greater than 99 on a number input. The type of input is number. I don't know how can I prevent the user from entering letters and values out of range(less than 1 and greater than 99) without using Angular's forms. The inputs are generated dynamically using ngFor. The input behavior(allowing the user to type anything, even though we use number type), the HTML5 validation features that are so bad, and Angular lack of flexibility to handle small problems are cornering me.

My last attempt:

template:

<input (change)="alterQuantity(index, $event)" >

component:

alterQuantity(index: number, event: any)
{
    var re = new RegExp("[1-99]");

    if (!re.test(event.target.value)) {
        event.stopPropagation();
        event.preventDefault();
        return;
    }
}

Possible duplicate of [HTML text input allow only numeric input](https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input) — Sjoerd de Wit, Feb 14 '19 at 11:57

score 1 · Answer 1 · answered Feb 14 '19 at 11:50

1

You can use HTML5 min max features

<input type="number" name="quantity" min="1" max="99">

answered Feb 14 '19 at 11:50

Sjoerd de Wit

2,353
5
26
45

Cornered! How about the user typing in the number input. He can even enter letters. – Feb 14 '19 at 11:52
Just not possible, your attempt is the best way I can think about @diegoalves – Nguyen Phong Thien Feb 14 '19 at 11:55
Here's another question which seems to have a working answer https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input – Sjoerd de Wit Feb 14 '19 at 11:57
The problem is that I am using Angular. DOM manipulation is a crime. – Feb 14 '19 at 12:05

score 0 · Answer 2 · answered Feb 14 '19 at 12:04

0

if you want to use regex. you could use ^([1-9]|[1-8][0-9]|9[0-9])$ and put it in pattern.

<input (change)="alterQuantity(index, $event)" pattern="^([1-9]|[1-8][0-9]|9[0-9])$" >

answered Feb 14 '19 at 12:04

GreedyAi

2,709
4
29
55

How to prevent invalid data in Angular without form features

2 Answers2