Skip to content
This repository has been archived by the owner on Oct 29, 2024. It is now read-only.

Add validated native controls #243

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

Dreamescaper
Copy link
Contributor

@Dreamescaper Dreamescaper commented Nov 23, 2020

Resolves #233 .

Added separate project Microsoft.MobileBlazorBindings.Forms with controls to allow to use same validations as in regular Blazor (see here).

Added controls:

  • CascadingEditContext (alternative to EditForm). It creates EditContext based on provided Model and sets it as CascadingValue.
  • ValidatedEntry (alternative to InputText). It wraps Entry control, and notifies EditContext about all updates.
  • ValidationLabel (alternative to ValidationMessage). It wraps Label control, and fills it with validations from EditContext.
  • SubmitButton. Wraps Button, but instead of OnClick property provides OnValidSubmit and OnInvalidSubmit.

(I haven't added other validated input controls, as not sure whether this approach will be approved).

I've also added sample page to ControlGallery with built-in DataAnnotationsValidator and 3rd party FluentValidator usages.

Razor
        <CascadingEditContext Model="LogInModel">
            @if (useFluentValidator)
            {
                <FluentValidator Validator="new LogInModelValidator()" />
            }
            @if (useDataAnnotationsValidator)
            {
                <DataAnnotationsValidator />
            }

            <ValidatedEntry @bind-Text="@LogInModel.Email" Placeholder="Email" />
            <ValidationLabel For="@(() => LogInModel.Email)" TextColor="Color.Red" />

            <ValidatedEntry @bind-Text="@LogInModel.Password" Placeholder="Password" />
            <ValidationLabel For="@(() => LogInModel.Password)" TextColor="Color.Red" />

            <ValidatedEntry @bind-Text="@LogInModel.ConfirmPassword" Placeholder="Confirm password" />
            <ValidationLabel For="@(() => LogInModel.ConfirmPassword)" TextColor="Color.Red" />

            <SubmitButton Text="Submit" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit" />
            <Label Text="@statusText" />
        </CascadingEditContext>
Result recording

t-video5323504876972411554

@Dreamescaper
Copy link
Contributor Author

Dreamescaper commented Nov 23, 2020

I'm still not sure about naming. If you have better ideas - would be great!

Also, with current approach I forward all attributes to underlying elements (Label, Button, Entry), which means that I need to re-define all those properties.
I could use [Parameter(CaptureUnmatchedValues = true)] attribute to catch all provided attributes, and forward them all in single batch, but that means that there will be no IntelliSense support, which is not great.

Let me know if you have better ideas.

@Eilon
Copy link
Member

Eilon commented Dec 14, 2020

I'll take a look at this! I'm not super familiar with Blazor's edit experience (I've only tried a few samples/tutorials) so I'll play with what you have and keep this going. Thank you!

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

Successfully merging this pull request may close these issues.

Provide alternative to EditForm components for native controls for validation
2 participants