У меня есть форма, которая собирает основную информацию о пользователе, включая «Имя» и «Описание», оба поля являются обязательными.
Кнопку отправки следует отключить, если форма недействительна. Однако я столкнулся с проблемой, когда все поля помечаются как недействительные, как только я ввожу поле «Имя», даже если оно заполнено правильно.
Есть ли способ отключить кнопку, не вызывая сообщений проверки в полях ввода в пользовательском интерфейсе.
Как, например, свойство Angular form.active.
@page "/form"
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms
<EditForm EditContext = "_context" OnValidSubmit = "HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<hr />
<div class = "form-group row">
<label for = "Name" class = "col-sm-2 col-form-label">
First Name
</label>
<div class = "col-sm-10">
<InputText id = "Name" class = "form-control" placeholder = "First Name"
@bind-Value = "_applicant.Name" />
<ValidationMessage For = "@(() => _applicant.Name)" />
</div>
<div class = "col-sm-10">
<InputText id = "Des" class = "form-control" placeholder = "Description"
@bind-Value = "_applicant.Description" />
<ValidationMessage For = "@(() => _applicant.Description)" />
</div>
</div>
<button class = "btn btn-primary" type = "submit" disabled = "@(!_context.Validate())">Send</button>
</EditForm>
@code {
private EditContext _context;
private Applicant _applicant = new Applicant();
protected override void OnInitialized()
{
_context = new EditContext(_applicant);
}
private void HandleValidSubmit()
{
}
public class Applicant
{
public int Id { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
[Required]
public string Description { get; set; } = string.Empty;
}
}
[Вежливо] Ваша UX-логика немного шаткая. Вы отключите кнопку отправки, которая будет выполнять проверку до тех пор, пока форма не станет действительной?? Вы вызываете Validate(), чтобы настроить кнопку [вызывается при каждом событии рендеринга после обновления поля], которая, очевидно, вызывает проверку всей формы: вы получаете закодированное поведение.
Следующий образец может удовлетворить ваши потребности:
Примечания:
Не используйте _context.Validate()
. Вместо этого вы можете проверить, есть ли сообщение о проверке с помощью _context.GetValidationMessages().Count()==0
. Но [Required]
— это специальная проверка, которая не учитывается перед отправкой (напротив, [StringLength(10)]
будет учитываться). Поэтому я проверяю, не все ли поля пусты здесь вручную.
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms
@rendermode InteractiveServer
<EditForm EditContext = "_context" OnValidSubmit = "HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<hr />
<div class = "form-group row">
<label for = "Name" class = "col-sm-2 col-form-label">
First Name
</label>
<div class = "col-sm-10">
<InputText id = "Name" class = "form-control" placeholder = "First Name"
@bind-Value = "_applicant.Name" />
<ValidationMessage For = "@(() => _applicant.Name)" />
</div>
<div class = "col-sm-10">
<InputText id = "Des" class = "form-control" placeholder = "Description"
@bind-Value = "_applicant.Description" />
<ValidationMessage For = "@(() => _applicant.Description)" />
</div>
</div>
<button class = "btn btn-primary" type = "submit" disabled = "@disableSubmit">Send</button>
</EditForm>
@code {
private EditContext _context;
private Applicant _applicant = new();
private bool disableSubmit = true;
protected override void OnInitialized()
{
_context = new EditContext(_applicant);
_context.OnFieldChanged += HandleFieldChanged;
}
private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
{
//after field changed (after binding), check if all fields are not empty
if (typeof(Applicant).GetProperties().Any(prop => prop.GetValue(_applicant) == string.Empty))
{
disableSubmit = true;
}
else
{
disableSubmit = false;
}
}
public void Dispose()
{
_context.OnFieldChanged -= HandleFieldChanged;
}
private void HandleValidSubmit()
{
}
public class Applicant
{
public int Id { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
[Required]
public string Description { get; set; } = string.Empty;
}
}
Это действительно помогло мне, теперь я работаю с проверкой самой модели вместо вызова .Validate() в EditContext.
Это потому, что вы вызываете
Validate()
в контексте редактирования.