Disable button when input is empty in Angular 2
To bind functions to events, you don't have to prefix them with on
. Just place the event.
For example, if you want to handle the keydown
(plunker demo):
<input type="password" [(ngModel)]="myPassword" (keydown)="checkPasswordEmpty($event)"/>
But in your specific case, since you already are using ngModel
you are better off using (ngModelChange)
:
<input type="password" [(ngModel)]="myPassword" (ngModelChange)="checkPasswordEmpty()"/>
Because it will pick up the changes when the user pastes (via CTRL+V ormouse right click menu -> Paste) the password instead of typing it.
See plunker demo for using (ngModelChange)
here.
In this case, I would leverage form validators. I would add the "required" validation on your input and use the global state of your form to disable / enable your button.
With the template-driven approach, there is no code to add in your component, only stuff in its template...
Here is sample below:
<form #formCtrl="ngForm">
<input ngControl="passwordCtrl" required>
<button [disabled]="!formCtrl.form.valid">Some button</button>
</form>