Providing blazorise validation for custom component

[Messiremi]

Hello,

In my knowledge, it is not possible to create a custom component and use it with the Blazorise validation, isn't it ?

ex:
Create a custom component MyAwesomeComponent in which you put what you want, like a label + some TextEdits
You want to use it in a big form where you use Blazorise validation

<Validations @ref="MyModelValidations" Model="MyModel">  
    <Validation>
        <TextEdit @bind-Text="MyModel.Field1" [...]>
            <Feedback>
                <ValidationError />
            </Feedback>
        </TextEdit>
    </Validation>
    <Validation>
        <TextEdit @bind-Text="MyModel.Field2" [...]>
            <Feedback>
                <ValidationError />
            </Feedback>
        </TextEdit>
    </Validation>
    <Validation>
        <TextEdit @bind-Text="MyModel.Field3" [...]>
            <Feedback>
                <ValidationError />
            </Feedback>
        </TextEdit>
    </Validation>
    <Validation>
        <MyAwesomeComponent @bind-MyData="MyModel.Field4" [...]>
            <Feedback>
                <ValidationError />
            </Feedback>
        </MyAwesomeComponent>
    </Validation>
</Validations>

@code{  
    [...]
    private async Task Submit(MouseEventArgs e){  
        if(MyModelValidations.ValidateAll()){  
            [...]//do something if model is validated
        }
    }
}

Any possibilities to achieve it or an equivalent ?
If not, is it possible to consider this feature in future developments ?

Thank you

[stsrki]

If you have TextEdit inside your custom components then validation will work automatically for that TextEdit. You only need to provide it with the right data so you only need to pass MyData parameter down to text edit. And you also must use TextExpression so that it knows how to process data-annotations on a supplied model.

MyAwesomeComponent.razor

<TextEdit Text="@MyData" TextChanged="@MyDataChanged" TextExpression="@MyDataExpression"/>
@code{
  [Parameter] public string MyData {get;set;}
  [Parameter] public EventCallback<string> MyDataChanged { get; set; }
  [Parameter] public Expression<Func<string>> MyDataExpression { get; set; }
}

Usage

<Validation>
        <MyAwesomeComponent @bind-MyData="MyModel.Field4" MyDataExpression="@(()=>MyModel.Field4)">
            <Feedback>
                <ValidationError />
            </Feedback>
        </MyAwesomeComponent>
    </Validation>

or (MyDataExpression might work automatically with Blazor)

<Validation>
        <MyAwesomeComponent @bind-MyData="MyModel.Field4">
            <Feedback>
                <ValidationError />
            </Feedback>
        </MyAwesomeComponent>
    </Validation>

[Messiremi]

Thank you, I was missing the Expression to handle data annotations

[stsrki]

The expression is kinda secret Blazor feature and it's not documented that much. Not a lot of people know about it.

Glad I could help :)