字段无效时边框颜色不变

如何解决字段无效时边框颜色不变

我对Blazor并不陌生。我正在尝试通过引用this页面来呈现EditForm内部的自定义组件。

但是当我提交没有价值的表格时，边框颜色不会更改为红色。同样，在清除输入的值后提交表单时，边框不会更改为红色。它保持绿色。

截屏：

代码段

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返回修改后的情况下有效。

任何帮助将不胜感激。

解决方法

要了解为什么FieldCssClass返回有效而ValidationMessage返回无效的原因，请务必注意您的组件NativeTextboxComponent对验证过程所做的操作。

在您的示例中，如果将NativeTextBoxComponent更改为InputText，它将正常工作。这是因为@ bind-value设置了InputBase的ValueExpression。此属性不是简单的字符串，而是表达式。此表达式用于从模型中获取属性，例如Required。

如果您使用public _deleteFile = (ev) => { const sid = ev; console.log(sid); } ，则将一个简单的字符串绑定到该组件。它已经失去了与其属性的联系。双向绑定仍然有效。如果您的组件更改了字符串，则会将其写回到对象。如果没有字符串，这就是您的<NativeTextBoxComponent @bind-Value="@model.NativeValue"></NativeTextBoxComponent>返回错误的原因。但同样，从嵌套<ValidationMessage For="() => model.NativeValue" /> 的角度来看，它只是一个字符串。

要解决您的问题，您的组件可以从InputBase继承，并且可以创建自定义布局。

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

,

我认为您没有填写需要填写字段的模型。这是来自文档here

的示例

using System.ComponentModel.DataAnnotations;

public class ExampleModel
{
    [Required]
    [StringLength(10,ErrorMessage = "Name is too long.")]
    public string Name { get; set; }
}

,

ValueExpression被定义为参数，因此父组件模型未更新为子组件表达式，因此FieldIdentifier cssClass中的模型值未更新。在Editform中呈现自定义组件时，直接调用invokeAsync和value表达式（无需使用two-bind（@ bind-Value））。

Index.razor

<EditForm Model="@model">
      <DataAnnotationsValidator />
      <h5>TextBox : @model.FirstName</h5>
    <NativeTextBoxComponent @bind-Value="@model.FirstName" InputHandler="@inputHandler"> </NativeTextBoxComponent >
    <ValidationMessage For="() => model.FirstName" />
   <SfButton CssClass="e-small e-info" Type="submit" Content="Submit"></SfButton>
</EditForm>
@code {
public class Countries
{
    [Required]
    public string FirstName { get; set; }
}
public Countries model = new Countries();

private void inputHandler(ChangeEventArgs args)
{
    model.FirstName = (string)args.Value;
}

}

NativeTextboxComponent.razor

<InputText Value="@Value" ValueChanged="ValueChanged" @oninput="@InputHandler" ValueExpression="@ValueExpression"></InputText>
@code
{ 
private string _value { get; set; }
[Parameter]
public string ID { get; set; }
[Parameter]
public Expression<Func<string>> ValueExpression { get; set; }
[Parameter]
public string Value
{
    get => _value;
    set
    {
        if (!EqualityComparer<string>.Default.Equals(value,_value))
        {
            _value = value;
            ValueChanged.InvokeAsync(value);
        }
    }
}
[Parameter]
public EventCallback<string> ValueChanged { get; set; }
[Parameter]
public EventCallback<ChangeEventArgs> InputHandler { get; set; }

}