Usually, when setting up a "MudForm" with live validation, the guiding validation messages from the validator class will automatically pop up below the form field when something is worng. This is not happening in my case for whatever reason.
When there is a validation error, and the user tries to submit, the form is also valid, which seems weird.
Here is the validator class:
public class CompanyUserValidator : AbstractValidator<CompanyUser>
{
public CompanyUserValidator()
{
RuleFor(x => x.FirstName).NotEmpty().WithMessage("bla bla bla");
// and so on
}
public Func<object, string, Task<IEnumerable<string>>> ValidateValue => async (model, propertyName) =>
{
var result = await ValidateAsync(ValidationContext<CompanyUser>.CreateWithOptions((CompanyUser)model, x => x.IncludeProperties(propertyName)));
if (result.IsValid)
return Array.Empty<string>();
return result.Errors.Select(e => e.ErrorMessage);
};
}
Here is the form:
<MudForm Model="@companyUser" @ref="form" Validation="@(validator.ValidateValue)" ValidationDelay="0">
<MudGrid Style="padding: 12px;">
<MudItem xs="12" sm="6"><MudTextField T="string" @bind-Value="companyUser.FirstName" Label="Fornavn" Variant="Variant.Outlined" Immediate="true" For="@(() => companyUser.FirstName)" /></MudItem>
<MudItem xs="12" sm="6"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.LastName" Label="Etternavn" Variant="Variant.Outlined" Immediate="true" For="(() => companyUser.LastName)" /></MudItem>
<MudItem xs="12" sm="6"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.Name" Label="Firma navn" Variant="Variant.Outlined" Immediate="true" For="(() => companyUser.Name)" /></MudItem>
<MudItem xs="12" sm="6"><MudTextField InputType="@InputType.Number" @bind-Value="companyUser.CompanyNumber" Label="Organisasjonsnummer" Variant="Variant.Outlined" Immediate="true" For="(() => companyUser.CompanyNumber)" /></MudItem>
<MudItem xs="12" sm="12" md="4"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.Address.StreetAddress" Label="Adresse" Variant="Variant.Outlined" Immediate="true" For="(() => companyUser.Address.StreetAddress)" /></MudItem>
<MudItem xs="12" sm="6" md="4"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.Address.PostalCode" Label="Postkode" Variant="Variant.Outlined" Immediate="true" For="(() => companyUser.Address.PostalCode)" /></MudItem>
<MudItem xs="12" sm="6" md="4"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.Address.City" Label="Poststed" Variant="Variant.Outlined" Immediate="true" For="(() => companyUser.Address.City)" /></MudItem>
<MudItem xs="12" sm="6"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.Email" Label="E-post" Variant="Variant.Outlined" Immediate="true" For="(() => companyUser.Email)" /></MudItem>
<MudItem xs="12" sm="6"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.PhoneNumber" Label="Mobilnummer" Variant="Variant.Outlined" Immediate="true" For="(() => companyUser.PhoneNumber)" /></MudItem>
<MudItem xs="12" sm="12">
<MudButton ButtonType="ButtonType.Button" OnClick="@((e) => ValidateForm())" Variant="Variant.Outlined" Color="Color.Primary">Registrer deg</MudButton>
</MudItem>
</MudGrid>
</MudForm>
I've tried follwoing mudblazor's documentation, but that does not help.
The mudform presented was a child of an EditForm, this was hard to see because this component was referenced. Fixed.