Border color not changed when field is invalid

[JeyanthVictory]

Issue Description

When entered invalid value and submitting the form, validation throws but border color not changed.

Scenario

I am trying to render custom component inside EditForm by referring this page. But when I submit the form without value, border color not changed to red. Also when submitting the form after clearing the entered value, border not changed to red. It stays in green.

Screenshot:

Code Snippet

NativeTextboxComponent.razor

<InputText @bind-Value="@Value" class="form-control" />

@code {
 public string _Value;
    [Parameter]
    public string Value
    {
        get
        {
            return _Value;
        }
        set
        {
            if (_Value != value)
            {
                ValueChanged.InvokeAsync(value);
            }
            _Value = value;
        }
    }
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

}
}

Index.razor

<EditForm Model="@model" OnInvalidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <NativeTextBoxComponent @bind-Value="@model.NativeValue"></NativeTextBoxComponent>
    <ValidationMessage For="() => model.NativeValue" />
    <button type="submit">Submit</button>
</EditForm>

public class Countries
    {
        [Required]
        public string Values { get; set; }
        [Required]
        public string LastName { get; set; }
        [Required]
        public string NativeValue { get; set; }
    }
    public Countries model = new Countries();

FieldCssClass is returned modified valid for this case.

[mkArtakMSFT]

Thanks for contacting us.
This thread will help you understand what's happening: https://stackoverflow.com/questions/60658450/when-to-use-valuechanged-and-valueexpression-in-blazor

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.