MobileBlazorBindings
MobileBlazorBindings copied to clipboard
Add validated native controls
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 toEditForm). It createsEditContextbased on provided Model and sets it as CascadingValue.ValidatedEntry(alternative toInputText). It wrapsEntrycontrol, and notifiesEditContextabout all updates.ValidationLabel(alternative toValidationMessage). It wrapsLabelcontrol, and fills it with validations from EditContext.SubmitButton. WrapsButton, but instead ofOnClickproperty providesOnValidSubmitandOnInvalidSubmit.
(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

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