Accessing form state

Sometimes, we need access to form state inside the <EditForm> child content. The most common use for this is when we need to access the CSS classes for an input, indicating whether the input is modified or valid/invalid.

For example, if we use Bootstrap to create an email input control prepended with the @ symbol, we might end up with mark-up that looks something like the following.

<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>

The problem is, however, that when the user enters an invalid value the CSS invalid class is applied only to the <InputText> control.

If we want to apply the CSS invalid class to the input-group itself we can use the EditContext passed to us from the <EditForm> component.

The ChildContent parameter of <EditForm> is a RenderFragment<EditContext>, which means the EditContext instance is passed into its inner content via a variable named context (or whatever alias we tell Blazor to use). See Templating components with RenderFragments for more information.

<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>

• Line 1
  Using the Context= syntax, we tell Blazor to use the variable name CurrentEditContext when passing in its EditContext.
• Line 6
  Uses the EditContext.FieldCssClass method to obtain the correct CSS class name for the input based on its state (modified / valid / invalid).

If we wish, we can hide the red outline on the generated <input> HTML element with some simple CSS.

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

This CSS tells the browser that our <input> HTML element with an invalid class applied should not have a red outline if it is parented directly by an HTML element that has the input-group CSS class applied.