EditForm validation not applying invalid class to custom component

You need to trigger the form's EditContext. There are a few ways to do this - I'll outline two of 'em.

Inside your custom component you can override TryParseValueFromString and handle the validation there - InputBase<> has these properties within it. This may not make sense considering your type is a string already.

Otherwise, you can have your custom component have the EditContext inject as a cascading parameter and then have an event callback on change to invoke the EditContext's NotifiedFieldChanged.

Small example below of this second example:

[CascadingParameter]
private EditContext EditContext { get; set; }

[Parameter] 
private Expression<Func<string>> ValueExpression { get; set; }

private FieldIdentifier _field;

private void OnInitialized()
{
    _field = FieldIdentifier.Create(ValueExpression);
} 

private void OnInputChanged(ChangeEventArgs args)
{
    EditContext.NotifyFieldChanged(_fieldIdentifier);
}

I fixed it with the following code in my custom component....

@inherits InputText

<InputText class="form-control"
 Value="@Value"
 ValueExpression="ValueExpression"
 ValueChanged="OnInputChanged" />

... it's a little strange inheriting InputText with an InputText in there. My code behind for it is like so...

private void OnInputChanged(string value)
{
    CurrentValueAsString = value;
    EditContext.NotifyFieldChanged(FieldIdentifier);
}

Then in my code I place that component like so....

<TestInput @bind-Value="ViewModel.Menu.Name"/>

It's a little strange work around, but does the job and applies the correct classes when it's valid/invalid.

You are inheriting from the <InputBase> and placing an InputText (an InputBase control) inside it. This doesn't really make sense.

Here's an example that demonstrates how to customize a standard InputText. It shows how to add custom attributes, one way of handling disabled, how user entered attributes are added to the input, and this one updates the value on keyboard entry rather than on losing focus.

@namespace Blazor.Starter.Components
@inherits InputText

    <input type="text" disabled="@Disabled" value="@this.CurrentValue" @oninput="OnInput" @ref="Element" id="@Id" @attributes="this.AdditionalAttributes" />

@code{

   [Parameter] public ElementReference? Element { get; set; }
   [Parameter] public string? Id { get; set; }
   [Parameter] public bool Disabled { get; set; }

    private void OnInput(ChangeEventArgs e)
        => this.CurrentValueAsString = e.Value.ToString();
}

@page "/Test3"
<EditForm EditContext="@_editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <label class="form-label">First Name</label>
    <CustomInput class="form-control" @bind-Value="this._formModel.FirstName" Id="mycontrol"></CustomInput>
    <label class="form-label">First Name</label>
    <CustomInput class="form-control" @bind-Value="this._formModel.FirstName" Id="mydisabledcontrol" Disabled="true"></CustomInput>
    <div class=" m-2 p-2">
        <button type="submit" class="btn btn-primary">New Person</button>
    </div>

    <div class="p3-m-3">Value: @_formModel.FirstName</div>

</EditForm>

@code {
    private EditContext? _editContext;
    private FormModel _formModel;

    private void HandleValidSubmit()
    {
        // handler
    }


    private class FormModel
    {
        [StringLength(5)][Required] public string FirstName { get; set; }
    }

    protected override Task OnInitializedAsync()
    {
        _formModel = new FormModel();
        _editContext = new EditContext(_formModel);
        return base.OnInitializedAsync();
    }
}

Aria Changes

See the two html snippets for when the input is valid/invalid.

<input type="text" id="mycontrol" class="form-control" _bl_759b54c2-54a4-461f-8101-9661c9034c17>

<input type="text" id="mycontrol" class="form-control" _bl_759b54c2-54a4-461f-8101-9661c9034c17 aria-invalid>