Блог

Я использую EditForm в своем приложении Blazor для отправки информации из пустой формы, а также формы, которая была инициализирована данными, извлеченными из базы данных. Когда я инициализирую форму данными из базы данных, я хочу, чтобы кнопка отправки была отключена до тех пор, пока не будет выполнен какой-либо ввод. Если ввод не выполняется, кнопка должна оставаться отключенной, поскольку нет новой информации для сохранения.

Итак, мне нужен какой-то детектор ввода, на котором я могу активировать отключенный флаг кнопки отправки. Каков правильный способ достижения этого? Итак, мне нужно что-то вроде этого:

 <EditForm Model="MyModel">
   <InputText type="text" @bind-value="x" @oninput="OnInput"/>
</EditForm>

private void Oninput(){
 IsDisabled = false;
}
 

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

Итак, после просмотра различных вариантов решение, по-видимому, заключается в следующем. Я хочу начать с отключенной кнопки отправки / сохранения и включить ее только при наличии ввода. Одним из способов достижения этой цели является использование события EditContext OnFieldChanged . Вот так:

 protected async override Task OnInitializedAsync()
{
        editContext = new EditContext(allRisksItem);
        editContext.OnFieldChanged  = EditContext_OnFieldChanged;
        ....
}

private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)
{
        disable_button = false;

}
 

Событие OnFieldChanged запускается, когда EditCotext обнаруживает изменение поля в форме. Я думаю, что я также сталкивался с запуском событий при вводе, но пока этого не пробовал. Таким образом, с этим решением нет необходимости иметь @oninput в каждом поле для определения ввода и т.д.

Надеюсь, это поможет людям, которые ищут решение этой проблемы. Спасибо тем, кто дал и другие предложения.

вы можете использовать флаг is modified в форме

 <EditForm Model="_model" Context="_Context">
    <InputRadioGroup @bind-Value="@_model.SelectedManufacturer">Manufacturer:<br>
        @foreach (var manufacturer in Manufacturers)
        {
            <InputRadio Value="manufacturer" />@manufacturer<br>
        }
    </InputRadioGroup> 

     <button type="submit" disabled="@(!_Context.IsModified())">Submit</button>
</EditForm>
 

@code {

 EditContext _Context { get; set; }


*//code below just to make the form work*
List<String> Manufacturers = new List<string> { "Ford", "Toyota", "Tesla" };
FormClass _model = new FormClass();

class FormClass
{
    public String SelectedManufacturer { get; set; }
}
 

}

(Предварительное примечание: на самом деле вам не нужно оборачивать все в элементы управления EditForm или использовать версии элементов управления Blazor, если вы не собираетесь использовать все функции проверки, используя аннотированные данные в моделях отображения и так далее) Вы также можете использовать ванильные элементы управления html.

Я делаю это тремя способами (никаких обещаний, что это лучшая практика Blazor)

(1) поместите элемент управления внутри блока if.

 if (!IsDisabled)
{
// My input stuff here
}
 

«Где эта кнопка? Думаю, мне лучше сначала сделать выбор! »

(2) Несмотря на то, что он жалуется на плохую разметку, вы можете установить значение Disabled для логических значений

 <someinput disabled="@IsDisabled">
 

Компилятор может настаивать на том, что disabled не принимает логические значения, но, по-видимому, Blazor поддерживает вас, потому что он отлично отображает.

(3) Не отключайте элемент управления, но используйте его как возможность предоставить информацию пользователю. Установите ярлык красного цвета и установите его текст на «Невозможно отправить форму до (чего-то)».

Одна вещь, которую я обычно делаю, когда хочу использовать текст на лету, — это добавить обработчик события keyup для перехвата клавиши Enter. Нет особого смысла включать элемент управления, когда кто-то только что ввел первую букву своего имени. (Хотя, честно говоря, Blazor настолько отзывчив, что я обычно вообще пропускаю кнопку и просто продолжаю и начинаю обрабатывать текст):

 <InputText type="text" @bind-value="x" @oninput="OnInput" @onkeyup="CheckText"/>

    void CheckText(KeyboardEventArgs e) 
    {
        if (e.Code == "Enter")
        {
            // IsDisabled = false;
            // StateHasChanged();
            DoMyTextStuff (x); 
        }
    }