一个子元素是否可以将验证问题传递到父级的<DataAnnotationsValidator>?

huangapple go评论52阅读模式
英文:

Can a child element pass validation issues up to the <DataAnnotationsValidator> in the parent

问题

我将代码部分排除,只提供翻译:

我正在将这简化为必要的部分。如果我简化得太多,请询问详情。

我有一个如下的剃刀页面:

<EditForm>
  <DataAnnotationsValidator />
  <AddressForm @ref="_addressElement"
       Value="@Model.AddressForm"
       ValueChanged="OnAddressSelected">
  </AddressForm>
  <ValidationSummary />
</EditForm>

这是AddressForm.razor:

<DxTextBox @bind-Text="@Model.StreetNumberAndName" ShowValidationIcon="true" />

这是它的模型属性:

[Required(ErrorMessage = "Your street address is required")]
public string? StreetNumberAndName
{
    get => _streetNumberAndName;
    set => _streetNumberAndName = value?.Trim();
}

这是我的问题。如何将[Required]验证消息从<AddressForm>移到父级razor/component中的<DataAnnotationsValidator>

英文:

I'm reducing this down to the essentials. If I reduced too much, please ask for detail.

I have a razor page as follows:

&lt;EditForm&gt;
  &lt;DataAnnotationsValidator /&gt;
  &lt;AddressForm @ref=&quot;_addressElement&quot;
       Value=&quot;@Model.AddressForm&quot;
       ValueChanged=&quot;OnAddressSelected&quot;&gt;
  &lt;/AddressForm&gt;
  &lt;ValidationSummary /&gt;
&lt;/EditForm&gt;

And here is AddressForm.razor

&lt;DxTextBox @bind-Text=&quot;@Model.StreetNumberAndName&quot; ShowValidationIcon=&quot;true&quot; /&gt;

And here is it's model property

[Required(ErrorMessage = &quot;Your street address is required&quot;)]
public string? StreetNumberAndName
{
    get =&gt; _streetNumberAndName;
    set =&gt; _streetNumberAndName = value?.Trim();
}

Here's my question. How can I get the [Required] validation messages up/out of &lt;AddressForm&gt; and to the &lt;DataAnnotationsValidator&gt; in the parent razor/component?

答案1

得分: 0

致敬 Zhi Lv,他给了我这个。这一切都来自他 - 他应该得到这个荣誉。

要验证绑定模型的整个对象图,包括集合和复杂类型属性,请使用实验性的 Microsoft.AspNetCore.Components.DataAnnotations.Validation 包提供的 ObjectGraphDataAnnotationsValidator(注意:如果要通过“管理 Nuget 包...”安装此包,需要选中“包括预发行版本”选项)。

参考以下示例:

模型:请注意,我们正在为导航属性使用 ValidateComplexType 属性。

public class TestModel
{
    [Required(ErrorMessage = "请输入名称")]
    public string Name { get; set; }
    [ValidateComplexType]
    public AddressViewModel AddressForm { get; set; }
}

public class AddressViewModel
{
    private string _streetNumberAndName;
    [Required(ErrorMessage = "需要您的街道地址")]
    public string? StreetNumberAndName
    {
        get => _streetNumberAndName;
        set => _streetNumberAndName = value?.Trim();
    }
}

父组件:使用 ObjectGraphDataAnnotationsValidator 而不是 DataAnnotationsValidator。

@page "/testpage"
@using BlazorServerApp3.Data

<EditForm Model="Model">
    <ObjectGraphDataAnnotationsValidator />
    <AddressForm @ref="_addressElement" testModel="Model"></AddressForm>
    <ValidationSummary />

    <div class="mt-n2">
        <button type="submit" class="btn btn-primary mr-2">保存</button>
    </div>
</EditForm>

@code{
    TestModel Model = new TestModel() { AddressForm = new AddressViewModel() };
    AddressForm _addressElement;  
}

子组件:

@using BlazorServerApp3.Data;
<h3>AddressForm</h3>

<input type="text" @bind="testModel.Name" />
<input type="text" @bind="testModel.AddressForm.StreetNumberAndName" />
@code {
    [Parameter]
    public TestModel testModel { get; set; }
}
英文:

Hat tip to Zhi Lv who gave me this. This is all from him - he deserves the credit for this.

To validate the bound model's entire object graph, including collection- and complex-type properties, use the ObjectGraphDataAnnotationsValidator provided by the experimental Microsoft.AspNetCore.Components.DataAnnotations.Validation package (Note: you need to checked the "include prerelease" option if you want to install this package via "Manage Nuget Package..." ).

Refer to the following sample:

Model: Note: we are using the ValidateComplexType attribute for the navigation property.

public class TestModel
    {
        [Required (ErrorMessage =&quot;Please enter the Name&quot;)]
        public string Name { get; set; }
        [ValidateComplexType]
        public AddressViewModel AddressForm { get; set; }
    }
    public class AddressViewModel
    { 
        private string _streetNumberAndName;
        [Required(ErrorMessage = &quot;Your street address is required&quot;)]
        public string? StreetNumberAndName
        {
            get =&gt; _streetNumberAndName;
            set =&gt; _streetNumberAndName = value?.Trim();
        }
    }

Parent component: using ObjectGraphDataAnnotationsValidator instead of DataAnnotationsValidator.

@page &quot;/testpage&quot;
@using BlazorServerApp3.Data

&lt;EditForm Model=&quot;Model&quot;&gt;
    &lt;ObjectGraphDataAnnotationsValidator /&gt;
    &lt;AddressForm @ref=&quot;_addressElement&quot; testModel=&quot;Model&quot;&gt;&lt;/AddressForm&gt;
    &lt;ValidationSummary /&gt;

    &lt;div class=&quot;mt-n2&quot;&gt;
        &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary mr-2&quot;&gt;Save&lt;/button&gt;
    &lt;/div&gt;
&lt;/EditForm&gt;

@code{
    TestModel Model = new TestModel() { AddressForm= new AddressViewModel()};
    AddressForm _addressElement;  
}

Child Component:

@using BlazorServerApp3.Data;
&lt;h3&gt;AddressForm&lt;/h3&gt;

&lt;input type=&quot;text&quot; @bind=&quot;testModel.Name&quot; /&gt;
&lt;input type=&quot;text&quot; @bind=&quot;testModel.AddressForm.StreetNumberAndName&quot; /&gt;
@code {
    [Parameter]
    public TestModel testModel { get; set; }
}

huangapple
  • 本文由 发表于 2023年6月8日 02:46:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/76426237.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定