Blazor: проверка вложенной формы редактирования в дочерней форме редактирования

У меня есть приложение размера сервера Blazor, в котором у меня есть форма редактирования внутри формы редактирования. Это выглядит так:

<EditForm Model=@newPerson Context = "PersonForm" OnValidSubmit = "@FormSubmitted">
    <ValidationSummary />
    <div class = "form-row">
        <h4>Staff Information</h4>
    </div>
    <div class = "form-row">
        <div class = "form-group col-md-2">
            <label for = "ResourceId">Person Id</label>
            <InputText @bind-Value=newPerson.ResourceId class = "form-control" id = "ResourceId" />
        </div>
        <div class = "form-group col-md-2">
            <label for = "Title">Title</label>
            <InputText @bind-Value=newPerson.Title class = "form-control" id = "Title" />
        </div>
        <div class = "form-group col-md-2">
            <label for = "Forename">Forename</label>
            <InputText @bind-Value=newPerson.Forename class = "form-control" id = "Forename" />
        </div>
        <div class = "form-group col-md-2">
            <label for = "Surname">Surname</label>
            <InputText @bind-Value=newPerson.Surname class = "form-control" id = "Surname" readonly />
        </div>
    </div>
    <EditForm Model=@newPos OnValidSubmit = "@AddPosition">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class = "form-row">
            <h4>Position</h4>
        </div>
        <div class = "form-row">
            <div class = "form-group col-md-2">
                <label for = "newPositionId">Position Id</label>
                <InputText @bind-Value=newPos.PositionId class = "form-control" id = "newPositionId" />
            </div>
            <div class = "form-group col-md-2">
                <label for = "newPositionName">Position Name</label>
                <InputText @bind-Value=newPos.PositionName class = "form-control" id = "newPositionName" />
            </div>
        </div>
        <input type = "submit" class = "btn btn-primary" value = "Add Additional Position" />
    </EditForm>
    <br />
    <input type = "submit" class = "btn btn-primary form-group mr-1" value = "Save Person" />
    <hr />
</EditForm>

Модели для этих форм:

public class Person
    {

        [Required]
        public string ResourceId { get; set; }
        [Required]
        public string Title { get; set; }
        [Required]
        public string Forename { get; set; }
        [Required]
        public string Surname { get; set; }
        public List<Position> Positions { get; set; }
    }
public class Position
    {
        [Required]
        public string PositionId { get; set; }
        [Required]
        public string PositionName { get; set; }
     }

методы отправки, которые вызывают эти формы:

void AddPosition(EditContext editContext)
    {
        bool formIsValid = editContext.Validate();
        if (formIsValid == true)
        {            
            newPerson.Positions.Add(newPos);
            newPos = new Position();
            //JsRuntime.InvokeVoidAsync("alert", "Position added.  Click submit to add another.");           
        }
    }
void FormSubmitted(EditContext editContext)
    {
        bool formIsValid = editContext.Validate();
        if (formIsValid == true)
        {
            newHr.Positions.Add(newPos);



            OnInitializedAsync();
        }
    }

Это позволяет мне добавлять несколько должностей в запись о человеке, и при этом форма будет проверяться правильно, однако при сохранении формы верхнего уровня (человек) она будет проверять человека правильно, но игнорировать проверку подформы (должность). Это позволяет мне добавлять недопустимые данные в запись человека при отправке формы, поскольку позиция содержит пустые данные.

Можно ли проверить вспомогательную форму редактирования при отправке основной формы редактирования с помощью метода FormSubmited?

Я пробовал добавлять различные проверки к моделям и теги [обязательные] к позиции в модели человека, но это не сработало. Я также попробовал настроить дочерний контекст в формах редактирования. Я попытался заставить форму AddPosition передать свою проверку основной форме, но не смог заставить ее работать вообще. Я рассматривал возможность использования пакетов nuget для внешней проверки, но в идеале мне бы хотелось сделать это с помощью собственного blazor, если это вообще возможно.

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
64
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мы можем использовать OnSubmit во внешней форме и вручную выполнять проверку как внешней, так и внутренней формы.

<EditForm Model=@newPerson Context = "PersonForm" OnSubmit = "@FormSubmitted">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class = "form-row">
        <h4>Staff Information</h4>
    </div>
    <div class = "form-row">
        <div class = "form-group col-md-2">
            <label for = "ResourceId">Person Id</label>
            <InputText @bind-Value=newPerson.ResourceId class = "form-control" id = "ResourceId" />
        </div>
        <div class = "form-group col-md-2">
            <label for = "Title">Title</label>
            <InputText @bind-Value=newPerson.Title class = "form-control" id = "Title" />
        </div>
    </div>
    <EditForm  EditContext = "@EC" OnValidSubmit = "@AddPosition">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class = "form-row">
            <h4>Position</h4>
        </div>
        <div class = "form-row">
            <div class = "form-group col-md-2">
                <label for = "newPositionId">Position Id</label>
                <InputText @bind-Value=newPos.PositionId class = "form-control" id = "newPositionId" />
            </div>
            <div class = "form-group col-md-2">
                <label for = "newPositionName">Position Name</label>
                <InputText @bind-Value=newPos.PositionName class = "form-control" id = "newPositionName" />
            </div>
        </div>
        <input type = "submit" class = "btn btn-primary" value = "Add Additional Position" />
    </EditForm>
    <br />
    <input type = "submit" class = "btn btn-primary form-group mr-1" value = "Save Person" />
    <hr />
</EditForm>

@code {
    private Person newPerson = new ();
    private Position newPos = new ();
    private EditContext EC { get; set; }
 


    protected override async Task OnInitializedAsync()
    {
        EC = new EditContext(newPos);
    }

    void AddPosition(EditContext editContext)
    {
        bool formIsValid = editContext.Validate();
        if (formIsValid == true)
        {
            newPerson.Positions.Add(newPos);
            newPos = new Position();
        }
    }

    void FormSubmitted(EditContext editContext)
    {
        bool personFormIsValid = editContext.Validate();
        bool formIsValid = EC.Validate();
        if (formIsValid == true)
        {
            OnInitializedAsync();
        }
    }
}

В ваших фрагментах кода нет <DataAnnotationsValidator /> во внешней форме, и вы не предоставили определение newPerson/newPos/newHr, поэтому я определил сам и прокомментировал некоторые коды в своем тесте.

Tiny Wang 03.05.2024 10:35

Установка частного контекста редактирования и проверка того, что отправка формы работает, спасибо

SilentUK 03.05.2024 12:55

Другие вопросы по теме