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

[Wizard] Add the ability to automatically validate an EditForm #1663

Merged
merged 12 commits into from
Mar 18, 2024

Conversation

StevenRasmussen
Copy link
Contributor

@StevenRasmussen StevenRasmussen commented Mar 8, 2024

In reference to #1662. I have not added any unit tests yet. I wanted to seek feedback before trying to add those. Running one of the demo projects and navigating to the Wizard page will show you how it works.

Pull Request

📖 Description

Adds the ability to the Wizard to automatically validate an EditForm when trying to navigate to the 'Next' page or complete the wizard.

✅ Checklist

General

  • I have added tests for my changes.
  • I have tested my changes.
  • I have updated the project documentation to reflect my changes.
  • I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

  • I have added a new component
  • I have added Unit Tests for my new component
  • I have modified an existing component
  • I have validated Unit Tests for an existing component

@vnbaaij vnbaaij added this to the vNext milestone Mar 8, 2024
@vnbaaij
Copy link
Collaborator

vnbaaij commented Mar 8, 2024

Looks good (only quick first look taken)

@vnbaaij vnbaaij self-requested a review March 8, 2024 17:22
OnChange="@OnStepChange">
<EditForm Model="_formData1" FormName="personalInfo" method="post">
<DataAnnotationsValidator />
<FluentWizardStepFormValidator />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the goal of the FluentWizardStepFormValidator?
Apart from registering the EditContext with the WizardStep, which is more a "technical" reason.

In other words, what will be the result if I use EditForm without FluentWizardStepFormValidator? The DataAnnotationsValidator will not be enough?

Is it the single possibility?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The FluentWizardStepFormValidator is what enables the WizardPage to become aware of the edit context so that it can call the EditContext.Validate() method before moving to the next page. If you leave this out then the default behavior is maintained. If you are aware of a better way to inform the WizardPage that it contains an EditForm with an EditContext then let me know.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know 😊
I'd like to know if this is the only solution.

It would be easier not to have to add DataAnnotationsValidator and also FluentWizardStepFormValidator. But the question is indeed how to retrieve EditContext 😇

I can check this weekend

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to avoid adding something too quickly, without knowing if it's possible to make it simpler.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. The only other way I know of is to instantiate your own EditContext higher up the chain and then pass it down to the different components via a parameter (either explicit or cascading). But I'll let you come back after the weekend to confirm if that's the case. Also, the <DataAnnotationsValidator> is not required per se by this change, but is rather the default/best practice for validating a Blazor EditForm when using data annotations. For more info see here: https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0

I personally have created my own higher-level component called <FluentForm> which encapsulates an EditForm and includes a lot of the defaults for editing forms and I include the <DataAnnotationsValidator> as well. I would also place the FluentWizardStepFormValidator in it so that I don't need to add it everywhere I use an EditForm.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be another (and good) idea to add a FluentEditForm. It might simplify this and other (future or existing) features. @vnbaaij what is your feeling about EditForm?

Give me a few days to do some tests. Tomorrow is my son's birthday, but I'll try to find some time on Sunday :-)

@dvoituron
Copy link
Collaborator

Excellent work. It will be very interesting

Copy link
Collaborator

@dvoituron dvoituron left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@StevenRasmussen Many thanks. Approved.

@vnbaaij vnbaaij enabled auto-merge (squash) March 18, 2024 09:43
@vnbaaij vnbaaij merged commit 423825b into microsoft:dev Mar 18, 2024
4 checks passed
@vnbaaij vnbaaij changed the title Added the ability for the Wizard component to automatically validate an EditForm [Wizard] Add the ability to automatically validate an EditForm Mar 19, 2024
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

Successfully merging this pull request may close these issues.

None yet

3 participants