search

allianz / ng-aquila

Angular UI Component library for the Open Insurance Platform
https://allianz.github.io/ng-aquila/
Other
205 stars 32 forks source link

[Progress Indicator] Dropdown doesn't show error #20

Closed superandrew closed 3 years ago

superandrew commented 3 years ago

⚡ Reproduction

StackBlitz link to reproduce the issue:

https://stackblitz.com/edit/aquila-issue-crymmr

Steps to reproduce:

  1. The first form activates a validation and errors are shown for a text field and a dropdown. The form is not within a progress indicator
  2. The second form triggers the validation (the progress indicator doesn't go forward. But the errors are not shown in the dropdown.

📗 Expected Behavior

Errors should be shown for a required dropdown with no values are selected

📕 Actual Behavior

Errors are not shown CleanShot 2021-03-03 at 16 44 06

📦 Environment

Phil147 commented 3 years ago

Hi @superandrew thanks I could reproduce and pin the problem down. A quick workaround until this is fixed would be: <button nxButton="primary small" nxStepperNext (click)="formStepper.controls.step1.controls.select.markAsTouched()" type="button">Next</button> not 100% correct as the dropdown is not really touched by the user but gives the same result.

The reason what happens: All controls use the material concept of an errorStateMatcher which is a class with a method that determines when a control should go into the error state. By default that is only when a control was touched by the user. In the progress stepper we override the default errorStateMatcher with one that also triggers the error messages when the next button is clicked even when the formControl wasn't touched yet. The dropdown is the only component that still has this kind of function baked into the component and is not using the injected errorStateMatcher. That's easily fixed.

Phil147 commented 3 years ago

Should be fixed in 11.2.0 👍 https://github.com/aposin/ng-aquila/commit/e8b9b1062b108e97c03e93b4aae94b94dc0c4234