I want to check whether the input is empty.
I tried (oninput) and (onchange), but they do not run.
<input type="password" [(ngModel)]="myPassword" (oninput)="checkPasswordEmpty()"/>
checkPasswordEmpty() {
console.log("checkPasswordEmpty runs");
if (this.myPassword) {
// enable the button
}
}
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>
<input name="passwordCtrl" required>
input inside mat-form-field. But the button stays disabled even when I enter some values in the input field...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.
app/app.component.ts file in the plunker.(ngModelChange) is probably better than (keydown), because if the user pastes the password, the keydown won't pick up the change, whereas (ngModelChange) will.
(keydown), it also works when pastes the password. But I will switch to (ngModelChange) because this seems more "Angular way". thank you!keydown doesn't pick for sure. Anyway, glad it helped :)(keydown) won't work, because it is for keyboard only, haWhen using the template-driven approach suggested by @Thierry Templier, the form object also has an invalid property.
So instead of:
<button [disabled]="!formCtrl.form.valid">Some button</button>
You can also use:
<button [disabled]="formCtrl.form.invalid">Some button</button>
It's a small difference, but overall cleaner syntax in my opinion.
