Trigger method when button is disabled

Question

I have a form in Angular 2 and this is the code associated with button that submits the form

 <button (mouseover)="showMesageValidation()" class="edm-button" type="submit" [disabled]="!f.valid">confirm</button>

I want to trigger a method that prints fields that are not properly validated, but I read that disabled elements do not fire events. I wonder how to list items that are not valid when mouseover the button?

score 2 · Accepted Answer · answered Sep 06 '17 at 07:50

2

Just use an *ngIf with the same condition so that errors are only shown when there are some

<div *ngIf="!f.valid">
 <div *ngFor="let err of errors">{{err}}</div>
</div>

answered Sep 06 '17 at 07:50

Günter Zöchbauer

623,577
216
2,003
1,567

how to get element that are not valid? – Walter White Sep 06 '17 at 08:02
`f.errors` should give you the information (assuming that `f` is a reference to the form. – Günter Zöchbauer Sep 06 '17 at 08:08
{{f.errors | json}} => null and some inputs are invalid – Walter White Sep 06 '17 at 08:14
Hard to tell with the provided information. In the examples they reference the input fields individually https://angular.io/guide/form-validation, but I'm quite sure the form provides the errors as well (not doing much with forms) – Günter Zöchbauer Sep 06 '17 at 08:16
Thanks for the help and attention – Walter White Sep 06 '17 at 08:18
Sorry, I'm wrong, `form` provides only errors for validation at form level. See https://stackoverflow.com/a/45951372/217408 I assume the answer referring to DeboraK's is the right one, she's the Angular forms specialist. – Günter Zöchbauer Sep 06 '17 at 08:18
Ok, Deborak's use reactive forms but I use template driven aprroach – Walter White Sep 06 '17 at 08:22
It shouldn't make much difference. `f` should be equivalent to `container`. – Günter Zöchbauer Sep 06 '17 at 08:24

Trigger method when button is disabled

1 Answers1