Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Entity Registration Modules MVP] [Stepper] Trigger Formly validations on blur #1535

Open
brandydanner-gsa opened this issue Sep 18, 2024 · 2 comments
Assignees

Comments

@brandydanner-gsa
Copy link

Is your feature request related to a problem? Please describe.
For the Entity Registration modules we are using a custom stepper class that extends SdsStepper. We need the Formly validations to fire on blur when leaving a field so that the user immediately sees if there is an issue with the data they entered.

Describe the desired solution
When the model is empty for a page, the Formly validations do not fire. In previous discussions, we mentioned this was an original requirement. However, it is desired that we can perhaps set a flag to turn this feature off so that Formly validations will run on blur even if it's the first time they've entered data on that page.

Describe alternatives you've considered
What we're currently doing is manually running validations when the user clicks the Next/Previous buttons instead of on blur.

Additional context
Please contact Brandy Danner / Scarlet Team.

@cwolf10
Copy link
Collaborator

cwolf10 commented Sep 26, 2024

Hey @brandydanner-gsa have you tried applying the modelOption onBlur to the fields where you want this behavior? Taking a look at our Stepper Advanced demo and going to the Report Detail step. The "Program or Project Title" field seems to have the behavior you are looking for. Entering data on that field does not clear the error until after the blur event. Same behavior with the error appearing.

@brandydanner-gsa
Copy link
Author

brandydanner-gsa commented Nov 4, 2024

Requirements for when the form is empty when the step loads:

  1. On loading the step, if the form is empty (no data has been entered yet):
  • No Formly field validation errors should run. The user should not see any errors if they have not entered any data on the page.
  • The step validity map should set the step as undefined (neither valid nor invalid).
  1. If the form began as empty, as the user enters and leaves a field (onblur) the Formly field validations should run on that field only. If a validation is fired:
  • The inline Formly error should display to the user.
  • The step validity map should set the step as invalid so that the stepper icon updates to the error state.
  1. If the user updates a field that has a validation error:
  • The Formly validations should run again on that field and the step validity map should update accordingly -- if any field still has a validation error, set the step is invalid. Otherwise, set the step as undefined (neither valid nor invalid).
  1. If the form began as empty, and the user does not touch a field, validations will not run on that field until the data is saved via clicking a stepper button.

  2. When the user clicks a stepper button (e.g., Next or Previous) to save data:

  • All Formly field validations should run on ALL fields, whether the user has touched the fields or not.
  • The step validity map should set the step as valid or invalid.
  • The user is still able to save data even if there are validation errors fired.

Requirements for when the form already has some data when the step loads:

  1. All Formly field validations should run on ALL fields, whether the field has a value or not.
  2. The step validity map should set the step as valid or invalid.
  3. When the user updates a field, the Formly validations should run again on that field and the step validity map should update accordingly.
  4. When the user clicks a stepper button to save data:
  • All Formly field validations should run on ALL fields, whether the user has touched the fields or not.
  • The step validity map should set the step as valid or invalid.
  • The user is still able to save data even if there are validation errors fired.

@yerramshilpa

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants