disable the button if the input is empty

Question

How can I disable the button if the input is empty, and enable it when the user start typing in the input, i tried that:

<input #new_field type="text" autocomplete="off" />
<p-button (onClick)="saveNewField(new_field.value)" [disabled]="new_field.value ==''" label="Save"></p-button>

and also this:

 <input [(ngModel)]="searchText" size="30" autocomplete="off" />
    <p-button (onClick)="saveNewField(searchText)" [disabled]="!searchText" label="Save"></p-button>

Answer 1

Use ngModel and bind a value and use to disable button. Try this:

<input type="text" autocomplete="off" [(ngModel)]="searchText"/>

<p-button (onClick)="saveNewField(searchText)" [disabled]="!searchText" label="Save"></p-button>

Typescript file:

export class AppComponent  {
  searchText: string;

  saveNewField(searchText) {
    console.log("searched Text", searchText);
  }
}