根据输入启用按钮 - Angular/Typescript

Question

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.

Answer 1

• 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