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

You can use ngModel for two way binding.There is no need to call the form.Simply call below.

<input  type="text" [(ngModel)]="some"/>
<button [disabled]="!some" >submit</button>

Also declare the variable some in component to bind the value.
ex: some:any;

Answer 2

Fill all input then button will be enabled

<input type="text" class="form-control" [(ngModel)]="title" />

<input type="text" class="form-control" [(ngModel)]="pitch" />

<input type="text" class="form-control" [(ngModel)]="text" />

<button type="button" class="btn save-btn" [disabled]="!title || !pitch || !text">Save</button>

you have form tag then try this

<form #experienceForm="ngForm">

    <input type="date" class="form-control" [(ngModel)]="date1" name="date1" required>

    <input type="date" class="form-control" [(ngModel)]="date2" name="date2" required>

    <button type="submit" class="btn success-btn" [disabled]="!experienceForm.form.valid">Save</button>

</form>

Answer 3

I was looking at the same issue for a while. Finally find something that worked for me. Try this:

HTML

<form [formGroup]="myForm">
   <input formControlName="searchText" type="text" size= "30" autocomplete="off" id="searchText" required/>
   <p-button (onclick)="saveNewField(searchText)" [disabled]="!searchText.value" label="Save"></p-button>
</form>

TS

export class searchFieldComponent implements OnInit {

    private searchText = string;
    searchText = new FormControl('', Validators.required);

    constructor(private serviceSearchField: SearchFieldService fb: FormBuilder) {
       this.myForm = fb.group({
          searchText: this.searchText
       });
    };

If this doesn't work, also create a model and call searchText in the model.

Answer 4

Try this

<form role="form" #f="ngForm" novalidate>
    <input class="form-input" type="number" [(ngModel)]="new_field" name="new_field" max="10">
    <p-button type="submit" (onClick)="saveNewField(new_field.value)" [disabled]="f.form.invalid">Test</p-button>
</form>

Answer 5

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);
  }
}

Answer 6

HTML part

<button type="button" class="btn btn-primary" (click)="doSomething()" [disabled]="!myForm.valid">Click me</button>

TS part:

ngOnInit(): void {
        this._buildForm();
    }

private _buildForm() {
        this.myForm = this.fb.group({
            someComponent1: [],
            someComponent2: [, [Validators.required]]
        });
    }

EXPLANATION

You should add validation for your components and set check is form validated. In my example above if Component 2 input field is empty your form will be invalidated and button disabled.