Disable button while input is not valid Angular

Question

I'd like to make certain input-fields only available for integer or decimal-values. So I got the following code:

<input type="text" pattern="[0-9]*" [(ngModel)]="myValue" pInputText class="medium-field"
    (change)="calculate()"/>

So this field is marked if the pattern does not match the input. Still I would like to disable the submit-button while the pattern is not matched. Can I somehow access that value as a boolean or is there another way?

Easiest way is probably to use Reactive Forms in Angular; but explaining what those are is probably beyond the scope of answering a question. An alternate way would be to trigger a buttonDisabled flag in your calculate function that controls whether your button is disabled or not. — JeffryHouser
– JeffryHouser, Commented Dec 27, 2018 at 0:52

Maarti · Accepted Answer · 2018-12-27 01:16:57Z

3

If you don't want to use Reactive Forms, you can do:

<input type="text" pattern="[0-9]*" [(ngModel)]="myValue" #myInput />
<button [disabled]="!myInput.validity.valid">Submit</button>

That will disable your submit button if the HTML validity of your input is invalid.

Here is a working example.

I would also suggest you use type="number" in your input.

answered Dec 27, 2018 at 1:16

Maarti

3,7294 gold badges20 silver badges36 bronze badges

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

Comments

KShewengger · Accepted Answer · 2018-12-27 01:20:40Z

1

The form will be marked automatically as invalid if your input didn't matched with your pattern.

You can just use:

<form novalidate
      #form="ngForm">

     /* Your inputs */

     <button type="button"
             [disabled]="form.invalid">     // form as per the referenced #form="ngForm"
                                            // Disables if your inputs are invalid or doesn't meet with its pattern
         Submit
     </button>

answered Dec 27, 2018 at 1:20

KShewengger

8,3293 gold badges27 silver badges38 bronze badges

Comments

PHP Geek · Accepted Answer · 2018-12-27 04:47:24Z

1

try form validation for it.using *ngIf and

<button type="submit" [disabled]="form.invalid">SEND</button>

answered Dec 27, 2018 at 4:47

PHP Geek

4,0632 gold badges19 silver badges32 bronze badges

Collectives™ on Stack Overflow

Disable button while input is not valid Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related