CODEWITHSUNDEEP
htmlangulartypescript
Rüdiger
Rüdiger

Reputation: 943

Disable button while input is not valid Angular

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?

Upvotes: 1

Views: 3397

Answers (3)

PHP Geek
PHP Geek

Reputation: 4033

try form validation for it.using *ngIf and 

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

Upvotes: 1

KShewengger
KShewengger

Reputation: 8269

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>

Upvotes: 1

Maarti
Maarti

Reputation: 3719

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.

Upvotes: 3

Related Questions