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 theContext=
syntax, we tell Blazor to use the variable name CurrentEditContext when passing in itsEditContext
. - Line 6
Uses theEditContext.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.
