GSA / sam-design-system

https://gsa.github.io/sam-design-system/
Other
20 stars 14 forks source link

formly datepicker component now allowing to show both "This field is required" and "Valid date format required (ex: MM/DD/YYYY)" only one is possible currently #1427

Closed raghav-gsa closed 1 month ago

raghav-gsa commented 5 months ago

Components Involved formly datepicker component now allowing to show both "This field is required" and "Valid date format required (ex: MM/DD/YYYY)" validation messages for empty and invalid date formats only one is possible currently. Since retuned value is null for both cases.

User enter empty and moved cursor out of box: "This field is required" or Valid date format required (ex: MM/DD/YYYY)

returned value to component: null

User entered invalid date format "This field is required" or Valid date format required (ex: MM/DD/YYYY)

returned value to component: null

Since returned value is null I a unable to customize my implementation to determine whether its invalid date or empty selection

Expected Behavior

formly datepicker component should allow both "This field is required" and "Valid date format required (ex: MM/DD/YYYY)" validation messages for empty and invalid dates entered.

Actual Behavior It is showing either of these messages for empty and invalid dates entered by user "This field is required" and "Valid date format required (ex: MM/DD/YYYY)" validation messages

Your Environment Angular Version: 6.2.12" "@gsa-sam/components": "16.0.12", "@gsa-sam/ngx-uswds": "16.0.1", "@gsa-sam/ngx-uswds-icons": "16.0.0", "@gsa-sam/sam-formly": "16.0.12", "@gsa-sam/sam-material-extensions": "16.0.12", "@gsa-sam/sam-styles": "3.0.18",

Additional context

image image
cwolf10 commented 2 months ago

@raghav-gsa the PR addressing this has been merged since v17.0.0. It added an optional property invalidDateMessage that when paired with required will produce the error messages you are expecting. Basic Formly Datepicker demo shows an example of these properties in action: https://gsa.github.io/sam-design-system/?path=/story/formly-datepicker--basic