Início / coding / Perguntas / 78548381
Accepted
RJM
Asked: 2024-05-29 16:54:05 +0800 CST

Como faço para mostrar validações do Blazorise em um componente personalizado?

  • 772

Estou usando o Blazorise com um aplicativo Blazor do lado do servidor. Quando tento agrupar os componentes de entrada do Blazorise em meus componentes personalizados, as mensagens de validação param de funcionar.

Com isso quero dizer que quando clico em enviar não vejo nenhuma mensagem de erro nos campos com valores inválidos. Se eu não agrupar as entradas do Blazorise e clicar em enviar, vejo mensagens de erro.

Aqui está um exemplo. Este formulário contém o mesmo campo duas vezes. Um embrulhado dentro do meu componente personalizado TextFielde o outro desembrulhado.

    <Form>
        <Validations @ref="@fluentValidations" Mode="ValidationMode.Manual" Model="AccountDto" HandlerType="typeof(FluentValidationHandler)">
            <TextField Label="Name" @bind-Text="@Account.Name" />
            <Validation>
                <Field>
                    <FieldLabel For="account-name-input">Name</FieldLabel>
                    <TextEdit ElementId="account-name-input" @bind-Text="@Account.Name">
                        <Feedback>
                            <ValidationError />
                        </Feedback>
                    </TextEdit>
                </Field>
            </Validation>
        </Validations>
        <Field>
            <Button Type="ButtonType.Submit"
                PreventDefaultOnSubmit
                Clicked="Submit">
                Submit
            </Button>
        </Field>
    </Form>

O código por trás contém o seguinte para o formulário (deixei de fora muitas informações):

    private Validations fluentValidations = null!;

    private async Task Submit()
    {
        if (await fluentValidations.ValidateAll())
            await CreateAccount(Account);
    }

O componente personalizado se parece. (O código por trás do arquivo não contém nada de interessante):

    <Validation>
        <Field>
            <FieldLabel For="@GetInputId()">
                @Label
            </FieldLabel>
            <TextEdit ElementId="@GetInputId()"
                      Text="@Text"
                      TextChanged="TextChanged"
                      Disabled="@Disabled">
                <Feedback>
                    <ValidationError />
                </Feedback>
            </TextEdit>
        </Field>
    </Validation>

Eu sei que a validação funciona corretamente porque o erro aparece no componente desembrulhado, mas não no meu componente.

blazor-server-side

1 respostas

  1. Best Answer

    Em seu componente empacotado, você precisa ter não apenas os parâmetros Texte, TextChangedmas um terceiro parâmetro chamado TextExpression. Este parâmetro informa ao Blazor como obter a referência ao campo vinculado usado para a validação.

    [Parameter] public string Text { get; set; }

[Parameter] public EventCallback<string> TextChanged { get; set; }

[Parameter] public Expression<Func<string>> TextExpression { get; set; }

    Em seguida, em vez de @bind-Textpassar todos os parâmetros para o TextEdit.

    <TextEdit Text="@Text" TextChanged="@TextChanged" TextExpression="@TextExpression" ...>
    • 1

relate perguntas