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

[brandydanner-gsa]

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]

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]

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).

2. 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.

3. 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).

4. 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.

5. 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

[brandydanner-gsa]

@yerramshilpa I am confirming that the updates in the SDS packages for the Stepper have met the requirements of this Github issue.

The ability to provide our own step validation function allows the stepValidityMap to be updated according to our requirements and our stepper icons are updated accordingly.

The Formly validations are all firing correctly based on our requirements.

When the form is empty when the step loads:

On loading the step, if the form is empty (no data has been entered yet) no errors are shown:

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 and displays the error:

If the user updates a field that has a validation error the validations run again:

When a Stepper button is clicked to Save, if a field has been touched, validations are run on ALL fields even if they haven't been touched:

When the form already has some data when the step loads:

All Formly field validations are run on ALL fields, whether the field has a value or not.

When the user updates a field, the Formly validations run again on that field

When the user clicks a stepper button to save data all Formly field validations are run on ALL fields, whether the user has touched the fields or not.