MobileBlazorBindings icon indicating copy to clipboard operation
MobileBlazorBindings copied to clipboard

Add validated native controls

Open Dreamescaper opened this issue 4 years ago • 2 comments
trafficstars

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 avatar Nov 23 '20 18:11 Dreamescaper

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.

Dreamescaper avatar Nov 23 '20 18:11 Dreamescaper

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!

Eilon avatar Dec 14 '20 19:12 Eilon