CODEWITHSUNDEEP
formsangular
gkri
gkri

Reputation: 1993

angular form disable submit button if field is empty

Sounds so simple but I've tried quite a few things and none work.

I'm using Angular 4 and my form is template-driven:

<form #form="ngForm" novalidate>
    <label for="insz">{{ 'SEARCH_PAGE.searchInszNumber' | translate }}</label>
    <input type="text" name="insz" [placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>
    <button (click)="onSearch(input.value)" ><span>{{'SEARCH_PAGE.search' | translate }}</span></button>
</form>

I want to disable the button when the (one and only) input field is empty.

Upvotes: 4

Views: 23370

Answers (2)

user4676340
user4676340

Reputation:

You could take a look at reactive forms. I had no knowledge of them until a week ago, but they're so powerful !

This means all you need to do is add a Validator (Validators.required in your case), and add a disabled condition to your button. And that's it, you're set.

Upvotes: 1

AVJT82
AVJT82

Reputation: 73357

You are missing ngModel in your input, for your input field to actually be a form control:

<input type="text" name="insz" ngModel
    [placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>

and then you need to disable the button of course if form is not valid:

<button [disabled]="!form.valid" (click)="onSearch(input.value)" >Submit</button>

Upvotes: 7

Related Questions