Enable button based on input - 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.

As it is said hereenter link description here try the (ngModelChange) event — rguerin
– rguerin, Commented Oct 10, 2018 at 9:18

user4676340 · Accepted Answer · 2018-10-10 09:16:01Z

2

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

answered Oct 10, 2018 at 9:16

user4676340

Sign up to request clarification or add additional context in comments.

2 Comments

Undertaked Over a year ago

Thanks for the help, both (input) and [disabled]="!sBoekOmschrijving" did the trick. P.S. Our boss used (onchange) in projects, but thansk for your advice being it (change)

user4676340 Over a year ago

@Undertaked onchange is a Javascript binding, If you use Angular and want to bind to your component, you remove the "on" : onclick → (click), onchange → (change) ...

Collectives™ on Stack Overflow

Enable button based on input - Angular/Typescript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related