CODEWITHSUNDEEP
javascripthtmlregexangular
GeForce RTX 4090
GeForce RTX 4090

Reputation: 3508

A field of Angular template driven forms considered invalid even though the regExp matches

I have this input:

    <div class="form-group">
        <label for="power">Hero Power</label>
        <input [(ngModel)]="model.powerNumber" name="powerNumber" type="text" 
            class="form-control" pattern="^[0-9]+$"id="powerNumber"> 
        <div [hidden]="powerNumber.valid" class="alert alert-danger">
            power must be a number
        </div>
    </div>

I have added a pattern validator to the input field (only number should pass the test). Below the input I have added an error message that should hidden when the input field is valid. However it shows even when I have entered a value that matches the pattern RegExp. What am I doing wrong?

Here is a Stackblitz demonstration https://stackblitz.com/edit/template-driven-form-demo-wl3apt?file=app%2Fuser-form%2Fuser-form.component.ts

Upvotes: 1

Views: 156

Answers (2)

Andrei
Andrei

Reputation: 12196

add #powerNumber="ngModel" template reference to input ngModel and all will be working. It is already done with name input in your example

Upvotes: 1

StepUp
StepUp

Reputation: 38189

I don't know whether it is eligible for you, however you can use input just for numbers:

<input [(ngModel)]="model.powerNumber" name="powerNumber" type="number" 
            class="form-control" id="powerNumber">

Upvotes: 1

Related Questions