angular form disable submit button if field is empty

Question

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.

Answer 1

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>