子コンポーネントのリストのBlazor検証

from_732

ObjectGraphDataAnnotationsValidatorBlazorの子コンポーネントのリストを使用してを実装しようとしていますのリストはAnimals、forループによってレンダリングされた形式でバインドされます。Childクラスのプロパティの1つは必須です。これはコードです:

Test.razor

@using System.ComponentModel.DataAnnotations
@page  "/Test"
@code {
    public class MyClass
    {
        public MyClass()
        {
            Animals = new List<AnimalItem>();
        }
        [Required]
        public string FormName { get; set; }
        public IList<AnimalItem> Animals { get; set; }
    }

    public class AnimalItem
    {
        [Required]
        public string Name { get; set; }
    }

    protected override async Task OnInitializedAsync()
    {
        MyFormData = new MyClass()
        {
            Animals = new List<AnimalItem>()
            {
                new AnimalItem { Name = "Fuffy" },
                new AnimalItem { Name = "Flaffy" }
            }
        };
        await base.OnInitializedAsync();
    }

    public MyClass MyFormData { get; set; }

    private void OnValidSubmit()
    {
    }
}

<EditForm Model="MyFormData" OnValidSubmit="@OnValidSubmit" >
    <ObjectGraphDataAnnotationsValidator />
    <ValidationSummary /> 
    <InputText type="text" @bind-Value="MyFormData.FormName"/>
    @foreach (var animal in MyFormData.Animals)
    {
        <Animal AnimalItem="animal"></Animal>
    }
    <button type="submit">Post</button>
</EditForm>

これは私のコンポーネントです:

Animal.razor

@code {
    [Parameter]
    public Test.AnimalItem AnimalItem { get; set; }
}
<label for="Animal">Animal</label>
<InputText  id="Animal" type="text" @bind-Value="@AnimalItem.Name" />

コンポーネントリストを編集して[名前]フィールドをクリアすると、フォームからNameプロパティが必要であることが正しく通知されます。ただし、送信ボタンを押しても保存できます。私は何が間違っているのですか?Blazorで検証をデバッグする方法に関するアドバイスは大歓迎です:)

ありがとう

ショーン・カーティス

私はあなたが[ValidateComplexType]Animalsコレクションに追加する必要があるかもしれないと思いますMyClass

    public class MyClass
    {
        public MyClass()
        {
            Animals = new List<AnimalItem>();
        }
        [Required]
        public string FormName { get; set; }
        [ValidateComplexType]
        public IList<AnimalItem> Animals { get; set; }
    }   

複雑なタイプに関するMSドキュメントセクション

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

子コンポーネントのAngularForm検証

分類Dev

子コンポーネントの検証Vuevee-validate

分類Dev

親コンポーネントと子コンポーネントのpropTypesを検証しますか?

分類Dev

ステッパーコンポーネントの子フォームの検証

分類Dev

親コンポーネントOnSubmitAngular 4から子コンポーネントの検証をトリガーする方法は?

分類Dev

レートコンポーネントant.designの検証

分類Dev

OrbeonXBLコンポーネントのデータの検証

分類Dev

複数のreactjsコンポーネントの検証

分類Dev

フォームを子コンポーネントに渡し、子コンポーネントのフォームを検証します

分類Dev

フォームを子コンポーネントに渡し、子コンポーネントのフォームを検証します

分類Dev

Symfony3構成コンポーネントの検証

分類Dev

親コンポーネントのAurelia火災検証

分類Dev

共有コンポーネントの検証

分類Dev

高次コンポーネントの型検証

分類Dev

自己検証formControlsとしてのAngularコンポーネント

分類Dev

Angular2ベータ:フォームベースの親/子コンポーネントをネストし、親から検証する

分類Dev

Vuelidateを使用して、親コンポーネントの子コンポーネントのフォーム入力フィールドを検証します

分類Dev

Angular4の親コンポーネントとは異なる3つのNgFormを持つ子コンポーネントNgFormsを検証する方法

分類Dev

Angular 2:親コンポーネントの子コンポーネントフォームフィールドを検証します

分類Dev

vuejsの子コンポーネントのcssスタイリング

分類Dev

子コンポーネントのルーター リンク

分類Dev

子コンポーネントのFormControlName

分類Dev

Vee-子の日付ピッカーコンポーネントを検証します

分類Dev

AzureのBlazor:コンポーネントレコードのリストが無効です

分類Dev

コンポーネントからのAngular4パターンの検証

分類Dev

2つのprimefacesカレンダーコンポーネントの検証

分類Dev

Blazor子コンポーネントでOnInitializedのWeb APIを使用する方法

分類Dev

Blazorの子コンポーネントEventCallBackが応答しない

分類Dev

コンポーネントのテスト検証後のJQueryエラー、フォーム投稿

Related 関連記事

  1. 1

    子コンポーネントのAngularForm検証

  2. 2

    子コンポーネントの検証Vuevee-validate

  3. 3

    親コンポーネントと子コンポーネントのpropTypesを検証しますか?

  4. 4

    ステッパーコンポーネントの子フォームの検証

  5. 5

    親コンポーネントOnSubmitAngular 4から子コンポーネントの検証をトリガーする方法は?

  6. 6

    レートコンポーネントant.designの検証

  7. 7

    OrbeonXBLコンポーネントのデータの検証

  8. 8

    複数のreactjsコンポーネントの検証

  9. 9

    フォームを子コンポーネントに渡し、子コンポーネントのフォームを検証します

  10. 10

    フォームを子コンポーネントに渡し、子コンポーネントのフォームを検証します

  11. 11

    Symfony3構成コンポーネントの検証

  12. 12

    親コンポーネントのAurelia火災検証

  13. 13

    共有コンポーネントの検証

  14. 14

    高次コンポーネントの型検証

  15. 15

    自己検証formControlsとしてのAngularコンポーネント

  16. 16

    Angular2ベータ:フォームベースの親/子コンポーネントをネストし、親から検証する

  17. 17

    Vuelidateを使用して、親コンポーネントの子コンポーネントのフォーム入力フィールドを検証します

  18. 18

    Angular4の親コンポーネントとは異なる3つのNgFormを持つ子コンポーネントNgFormsを検証する方法

  19. 19

    Angular 2:親コンポーネントの子コンポーネントフォームフィールドを検証します

  20. 20

    vuejsの子コンポーネントのcssスタイリング

  21. 21

    子コンポーネントのルーター リンク

  22. 22

    子コンポーネントのFormControlName

  23. 23

    Vee-子の日付ピッカーコンポーネントを検証します

  24. 24

    AzureのBlazor:コンポーネントレコードのリストが無効です

  25. 25

    コンポーネントからのAngular4パターンの検証

  26. 26

    2つのprimefacesカレンダーコンポーネントの検証

  27. 27

    Blazor子コンポーネントでOnInitializedのWeb APIを使用する方法

  28. 28

    Blazorの子コンポーネントEventCallBackが応答しない

  29. 29

    コンポーネントのテスト検証後のJQueryエラー、フォーム投稿

ホットタグ

アーカイブ