Подтверждение формы Blazor

У него есть события, которые запускаются для изменений. У нас есть методы, чтобы пометить поля как неизмененные; легко получить идентификатор поля, используемый Blazor, и уведомить EditContext об изменениях, если нам это нужно.

Проверьте статус проверки при изменении поля

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

После некоторого исследования и взлома я нашел уродливое решение, использующее событие и рефлексию KeyUp (я уверен, что парни из Blazor не хотят, чтобы вы делали это дома). Но вот мое решение.

@page "/"
  @using BlazorFormValidation.Models 
  
  <h1>My guestbook</h1> 
  
  <p>Leave me a message if you like my site</p> 
  
    <EditForm EditContext="@EditContext">    
    	<DataAnnotationsValidator />     
    
    <div class="form-group">        
    	<label for="name">Name: </label>        
        <InputText Id="name" Class="form-control" @bind-Value="@Model.Name" onkeyup='@(e => KeyUp(e, "Name"))'>
   </InputText>        
   		<ValidationMessage For="@(() => Model.Name)" />    
    </div>    
    
    <div class="form-group">        
    	<label for="body">Text: </label>        
        <InputTextArea Id="body" Class="form-control" @bind-Value="@Model.Text" onkeyup='@(e => KeyUp(e, "Text"))'>
    </InputTextArea>        
    	<ValidationMessage For="@(() => Model.Text)" />    
    </div>    
    <button type="submit" disabled="@OkayDisabled">Ok</button> 
    
    </EditForm> 
    
    @code
    {    
    	private EditContext EditContext;    
        private GuestbookEntry Model = new GuestbookEntry();     
          
        protected string OkayDisabled { get; set; } = "disabled";     
          
        protected override void OnInit()    
        {        
          EditContext = new EditContext(Model);        
          EditContext.OnFieldChanged += EditContext_OnFieldChanged;         
          
          base.OnInit();    
        }     
          
        protected override void OnAfterRender()    
        {        
          base.OnAfterRender();         
          
          SetOkDisabledStatus();    
        }     
          
        private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)    
        {        
          SetOkDisabledStatus();    
        }     
          
        void KeyUp(UIKeyboardEventArgs e, string memberName)    
        {        
          var property = Model.GetType().GetProperty(memberName);        
          var value = property.GetValue(Model);        
          property.SetValue(Model, value + e.Key);         
          
          var id = EditContext.Field(memberName);         
          
          EditContext.NotifyFieldChanged(id);    
        }     
          
        private void SetOkDisabledStatus()    
        {        
          if (EditContext.Validate())        
          {            
            OkayDisabled = null;        
          }        
          else        
          {            
            OkayDisabled = "disabled";        
          }    
        }
     }

public class GuestbookEntryValidator : AbstractValidator<GuestbookEntry>
{    
	public GuestbookEntryValidator()    
    {        
    	RuleFor(e => e.Name)                
        	.NotEmpty().WithMessage("Name is required")                
            .MaximumLength(10).WithMessage("10 characters maximum");         
        
        RuleFor(e => e.Text)                
        	.NotEmpty().WithMessage("Text is required");    
    }
}

<EditForm EditContext="@EditContext">    
  <FluentValidationValidator />     
  
  <div class="form-group">        
    <label for="name">Name: </label>        
    <InputText Id="name" Class="form-control" @bind-Value="@Model.Name"></InputText>        
    <ValidationMessage For="@(() => Model.Name)" />    
  </div>    
  
  <div class="form-group">        
    <label for="body">Text: </label>        
    <InputTextArea Id="body" Class="form-control" @bind-Value="@Model.Text"></InputTextArea>        
    <ValidationMessage For="@(() => Model.Text)" />    
  </div>    
  <button type="submit" disabled="@OkayDisabled">Ok</button> 

</EditForm>