Angular input pattern validation not working

Question

Can someone explain to me why my ngIf is not working when it should be activating when the pattern error occurs?

<div>
   <form #myForm="ngForm">
      <h1>Angular Calculator</h1>

      <h4>Sum:</h4>
      <input [(ngModel)]='add1' type="text" name="add1" size="5" pattern="^(0-9)*(/.(0-9)+)?$" required> +
      <input [(ngModel)]='add2' type="text" name="add2" size="5" pattern="^(0-9)*(/.(0-9)+)?$" required>

      <p *ngIf="add1?.errors?.pattern">
         Only numeric characters allowed</p>
      <p *ngIf="add2?.errors?.pattern">
         Only numeric characters allowed</p>
      &nbsp;
      <button (click)='CalcAdd()'>
         =
      </button>
   </form>
</div>

Ajay Ojha · Accepted Answer · 2018-10-31 02:26:19Z

1

use 'myForm' object for showing the error messages. I have changed in the code ngIf condition. see the working example on stackblitz

Here is the changed code.

  <div>
  <form #myForm="ngForm">
  <h1>Angular Calculator</h1>

  <h4>Sum:</h4>
  <input [(ngModel)]='add1' type="text" id="add1" name="add1" size="5" pattern="^(0-9)*(/.(0-9)+)?$"   required/> + <input [(ngModel)]='add2' type="text" name="add2"  size="5" pattern="^(0-9)*(/.(0-9)+)?$" required>

  <p *ngIf="myForm.controls.add1?.errors?.pattern">
      Only numeric characters allowed</p>
  <p *ngIf="myForm.controls.add2?.errors?.pattern">
      Only numeric characters allowed</p>
  &nbsp;
  <button (click)='CalcAdd()'>
    =
  </button>
  </form>
  </div>

answered Oct 31, 2018 at 2:26

Ajay Ojha

3901 gold badge3 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

stephencurry30 Over a year ago

Thanks for the help. The error shows even if I enter in a valid character - is there something wrong with my pattern?

Ajay Ojha Over a year ago

do you want only numeric in the textbox or decimal values?

stephencurry30 Over a year ago

Either numeric or decimals should be valid.

Ajay Ojha Over a year ago

try to use this pattern [0-9\.]+$ and I have updated the code, which only accepts numeric.

stephencurry30 Over a year ago

That works! Thank you! If it's alright I have one more question, how would I add to the ngIF to disable the button when the error occurs?

|

Collectives™ on Stack Overflow

Angular input pattern validation not working

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related