Событие oninput на стороне сервера Blazor, вызывающее ошибку - PullRequest
Новая
       84

Событие oninput на стороне сервера Blazor, вызывающее ошибку

0 голосов
/ 10 ноября 2019

Я создаю пример компонента с формой, которая принимает номер кредитной карты. Я пытаюсь добавить событие oninput в компонент InputText, который после подключения не работает должным образом. Без события форма функционирует нормально. Не имеет значения, что делает предоставленный метод для события, он всегда не работает должным образом.

код: 

<Microsoft.AspNetCore.Components.Forms.EditForm Model="@card" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <div>
            <p>
                <label for="ccNumberId">Debit or Credit Card Number</label><br />
                <InputText id="ccNumberId" @bind-Value="card.Number" 
                     @oninput="@(e => FormatCreditCardNumber())"       /><br />
                @numberFormat
            </p>
            <p>
                <label for="ccYearId">Expiration Year</label><br />
                <InputText id="ccYearId" @bind-Value="card.ExpYear" />
            </p>
            <p>
                <label for="ccMonthId">Expiration Month</label><br />
                <InputText id="ccMonthId" @bind-Value="card.ExpMonth" />
            </p>
            <p>
                <label for="ccCvcId">CVC</label><br />
                <InputText id="ccCvcId" @bind-Value="card.Cvc" />
            </p>
        </div>
    </div>
    <button type="submit">Submit</button>
</Microsoft.AspNetCore.Components.Forms.EditForm>

@code {
    string numberFormat;

    private StripeChargeModel card = new StripeChargeModel();

    protected override void OnInitialized()
    {
    }

    private void HandleValidSubmit()
    {
        JSRuntime.InvokeVoidAsync("showOnToast", "#paymentToast");
    }

    private void FormatCreditCardNumber()
    {
        if (card.Number.Length == 4)
        {
            numberFormat = String.Empty;
            numberFormat = card.Number + "-";
        }
    }
}

1 Ответ

1 голос
/ 11 ноября 2019

Обратите внимание, что вы привязываете значение @bind-Value="card.Number" вместо @bind-value:oninput. Директива @bind-Value связывает значение при изменении значения (т. Е. Событие onchange). И событие oninput срабатывает до onchange: когда срабатывает первое событие нажатия клавиши, card.Number равно null, потому что @onchangeсобытие еще не пришло.

Чтобы исправить эту проблему, вам нужно запретить card.Number is null при проверке card.Number.Length == 4 в противном случае он выдаст System.NullReferenceException, когда сработает первое событие нажатия клавиши: 

private void FormatCreditCardNumber()
{
    <strike>if (card.Number.Length == 4)</strike>
    <b>if (card.Number?.Length == 4)</b>
    {
        numberFormat = String.Empty;
        numberFormat = card.Number + "-";
    }
}
...