Update
I’m wondering. Why don’t you want to use the [disabled]
attribute binding provided by Angular 2? It’s the correct way to dealt with this situation. I propose you move your isValid
check via component method.
<button [disabled]="! isValid" (click)="onConfirm()">Confirm</button>
The Problem with what you tried explained below
Basically you could use ngClass
here. But adding class wouldn’t restrict event from firing. For firing up event on valid input, you should change click
event code to below. So that onConfirm
will get fired only when field is valid.
<button [ngClass]="{disabled : !isValid}" (click)="isValid && onConfirm()">Confirm</button>