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
}
}
Just click f12 in your browser, find the submit button in the html, and then remove the disabled ! It will submit the form even if the inputs are empty.
The main thing you need is a template variable, in my case it is #register="ngForm" , and you will use it for validating the form at the submit button, by setting its value to disabled attribute like [disabled]="!
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With