Ошибки проверки, оставленные на странице после ввода, обновляются путем изменения в связанное поле - PullRequest
Новая
       13

Ошибки проверки, оставленные на странице после ввода, обновляются путем изменения в связанное поле

0 голосов
/ 09 марта 2020

У меня есть элемент InputText на странице, где пользователь может напрямую ввести значение или нажать кнопку для поиска значения в списке (показанном в диалоговом окне). Элемент InputText связан с полем класса. Если они вводят значение, то событие в классе запускается, чтобы подтвердить, что это допустимая запись, и сохраняет соответствующее значение идентификатора (в основном это поле поиска). Это срабатывает, когда они выходят из поля, но отображает сообщение проверки даже для правильного выбора - я думаю, что проверка должна быть запущена до того, как мой обработчик событий обновит поле идентификатора. Если отображается сообщение проверки, и они используют кнопку для выбора значения, то выбор всегда будет действительным, и сообщение проверки должно быть удалено. Сообщение проверки не удаляется, пока вы не нажмете кнопку еще раз - при отображении диалога сообщение проверки будет удалено. Значение возвращается из диалогового окна, и обработчик события обновляет связанное значение в классе напрямую, и это прямое обновление вводит в заблуждение проверку. Вот соответствующие биты кода и HTML:

Код проверки (использует FluentValidation и пакет интеграции Blazor Питера Морриса): 

    public class InputDataValidator : AbstractValidator<InputData> {
        public InputDataValidator() {
            RuleFor(x => x.Account).Must((ob, prop) => ob.AccountID!=null).When(x => !string.IsNullOrWhiteSpace(x.Account)).WithMessage("You have not entered a valid account");
        }
    }

Класс, содержащий данные: 

    public class InputData {
        public EventHandler<EventArgs> AccountChanged;
        string account;
        public string Account {
            get {
                return account;
            }
            set {
                if (account != value) {
                    account = value;
                    AccountChanged?.Invoke(this, new EventArgs());
                }
            }
        }
        public int? AccountID { get; set; }
    }

Обработчик событий, который вызывается, когда пользователь выбирает значение из списка в диалоговом окне после нажатия кнопки, чтобы открыть диалоговое окно: 

    public async Task AccountLookup_Selected(int accountId) {
        Inputs.AccountID = accountId;
        Inputs.Account = await FormatAccount(accountId, null, null);
        StateHasChanged();
    }

HTML / Razor с InputText : 

            <div class="form-group">
                <label for="Account">Account: </label>
                <div style="display:flex">
                    <InputText id="Account" class="form-control" @bind-Value="@Inputs.Account" placeholder="Account Details" style="flex:1"></InputText>
                    <button class="btn btn-secondary" @onclick="@LookupAccount"><i class="fas fa-search"></i></button>
                </div>
                <ValidationMessage For="@(() => Inputs.Account)" />
            </div>

Обработчик событий, который запускается, когда пользователь вводит данные непосредственно в поле: 

    protected async void AccountChanged(object sender, EventArgs e) {
        Inputs.AccountID = null;
        if (Inputs.Account != null) {
            var code = Inputs.Account.Split(' ')[0];
            if (code != string.Empty) {
                var disp = await FormatAccount(null, code, null);
                if (code != disp) {
                    Inputs.Account = disp;
                    StateHasChanged();
                }
            }
        }
    }

FormatAccount () задает поле AccountID, а также возвращает отформатированную версию Account поле

Таким образом, кажется, что проверка не обнаруживает, что поле было обновлено из-за привязки, и изменение не обнаруживается до нажатия кнопки (кнопка поиска из фрагмента HTML, для пример). На полной странице есть два таких ввода, каждый из которых связан с различным полем поиска. Нажатие любой кнопки поиска приводит к обновлению проверки. Я пытался использовать StateHasChanged, но это не сработало. Если ничего не помогло, я мог бы вручную удалить элемент проверки в моем обработчике событий, но я бы скорее сделал это правильно. Что-то не так с моим кодом, и если нет, то каким-то образом я могу вручную запустить обновление проверки в моем обработчике событий?

...