Disable button click if input field is empty using angular 4
Add name property inside the input tag.
<input type='text' [(ngModel)]='listFilter' name="listFilter"/>
<button [disabled]="!listFilter" class="btn btn-primary" (click)='OnSearch(listFilter)'>Search</button>
You must use a template reference variable!
To do this, you can use either ref-prefix or #prefix. In your example, you will have to modify it like this:
<input ref-filter type='text' [(ngModel)]='listFilter' />
<button [disabled]="!filter.value" class="btn btn-primary" (click)='OnSearch(listFilter)'>
Search
</button>
A model reference variable (#varRef) is not the same as a model input variable (variable let), as you might see in a * ngFor. The scope of a reference variable is the entire model. Do not set the same variable name more than once in the same model. The execution value will be unpredictable.
- More documentation here : https://angular.io/guide/template-syntax