CODEWITHSUNDEEP
javascripthtmlangulartypescript
Undertaked
Undertaked

Reputation: 23

Enable button based on input - Angular/Typescript

My button has to enable when I fill my input. Currently it keeps being disabled.

HTML button:

<button pButton type="button" class="buttonCSS" [disabled]="buttonDisabled" label="Boeken" id="button" (click)="on_Boek()"></button>

HTML input

<input type="text" [(ngModel)]="sBoekOmschrijving" (onchange)="on_ChangeInput()" pInputText/>

TypeScript function

on_ChangeInput()
{
 this.buttonDisabled = false 
}

Typescript button disabled always true

buttonDisabled = true

Most likely a stupid question.. but I really can't figure it out.. thanks anyway. I am not allowed to use Jquery.

Upvotes: 2

Views: 9882

Answers (1)

user4676340
user4676340

Reputation:

  • onchange are for selects, not inputs
  • (onchange) doesn't exist in Angular (it's change)
  • (input) could do the trick

But the best solution would be : 

<button pButton type="button" class="buttonCSS" [disabled]="!sBoekOmschrijving" label="Boeken" id="button" (click)="on_Boek()"></button>
<input type="text" [(ngModel)]="sBoekOmschrijving" pInputText/>

By relying on falsy values, you put the condition

Disable the button if the sBoekOmschrijving field has no value

Upvotes: 2

Related Questions