Blazor University (34) forms - get form status

Link to the original text ：https://blazor-university.com/forms/accessing-form-state/

Get form status

Source code ^[1]

Sometimes , We need to get  <EditForm> Form status in the sub content . The most common use is when we need to access the input CSS Class time , Indicates whether the input is modified or valid / Invalid .

for example , If we use Bootstrap Create a with @ E-mail input control for symbol , We may end up with the following markup .

<div class="form-group">
  <label for="EmailAddress">Email address</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">@@</span>
    </div>
    <InputText @bind-Value=MyContact.EmailAddress id="EmailAddress" class="form-control" type="email" />
  </div>
</div>

with @ E-mail input of symbol

However , The problem lies in , When the user enters an invalid value ,CSS Invalid class only applies to <InputText> Control .

Pre email input with errors

If we want to CSS Invalid class applied to input group itself , We can use from <EditForm> Components are passed to us EditContext.

<EditForm> Of ChildContent Parameter is RenderFragment<EditContext>, It means EditContext The instance is named context The variable of （ Or we tell Blazor Any alias used ） To its internal content . For more information , Please see use RenderFragments Templated components ^[2].

<EditForm [email protected] Context="CurrentEditContext">
  <DataAnnotationsValidator />

  <div class="form-group">
    <label for="EmailAddress">Email address</label>
    <div class="input-group @CurrentEditContext.FieldCssClass( () => MyContact.EmailAddress)">
      <div class="input-group-prepend">
        <span class="input-group-text">@@</span>
      </div>
      <InputText @bind-Value=MyContact.EmailAddress id="EmailAddress" class="form-control" type="email" />
    </div>
  </div>

</EditForm>

• The first 1 That's ok

  Use Context= grammar , We tell Blazor Before passing in its EditContext Use variable names when CurrentEditContext.

• The first 6 That's ok

  Use EditContext.FieldCssClass Method according to the status of the input （ modify / It works / Invalid ） Get the right CSS Class name .

Pre email input , error CSS Apply to parent element

If we want to , We can use some simple CSS Hide generated <input> HTML The red outline on the element .

.input-group > input.invalid
{
  outline: none;
}

The CSS Tell the browser , If an invalid class is applied <input> HTML The element is directly applied by input-group CSS Class HTML Element as parent element , Then the element should not have a red outline .

Input only outlines external elements

Reference material

[1]

Source code : https://github.com/mrpmorris/blazor-university/tree/master/src/Forms/AccessingFormState