有时，我们需要访问<EditForm>子内容中的窗体状态。最常见的用法是当我们需要访问输入的CSS类时，指示输入是修改的还是有效/无效的。
    例如，如果我们使用Bootstrap创建一个带有@符号前缀的电子邮件输入控件，我们最终可能会得到如下所示的标记。

    1. <div class="form-group">
    2.   <label for="EmailAddress">Email address</label>
    3.   <div class="input-group">
    4.     <div class="input-group-prepend">
    5.       <span class="input-group-text">@@</span>
    6.     </div>
    7.     <InputText @bind-Value=MyContact.EmailAddress id="EmailAddress" class="form-control" type="email" />
    8.   </div>
    9. </div>

    image.png
    然而，问题是当用户输入无效值时，CSS无效类仅应用于<InputText>控件。
    image.png
    如果我们想要将CSS无效类应用到输入组本身，我们可以使用从<EditForm>组件传递给我们的EditContext。
    <EditForm>的ChildContent参数是一个RenderFragment<EditContext>，这意味着EditContext实例通过名为context(或我们告诉Blazor使用的任何别名)的变量传递到其内部内容。有关详细信息，请参阅使用RenderFragments模板化组件。

    1. <EditForm Model=@MyContact Context="CurrentEditContext">
    2.   <DataAnnotationsValidator />
    4.   <div class="form-group">
    5.     <label for="EmailAddress">Email address</label>
    6.     <div class="input-group @CurrentEditContext.FieldCssClass( () => MyContact.EmailAddress)">
    7.       <div class="input-group-prepend">
    8.         <span class="input-group-text">@@</span>
    9.       </div>
    10.       <InputText @bind-Value=MyContact.EmailAddress id="EmailAddress" class="form-control" type="email" />
    11.     </div>
    12.   </div>
    14. </EditForm>
    • LIine 1

    使用Context=语法，我们告诉Blazor在传递EditContext时使用变量名CurrentEditContext。

    • Line 6

    使用EditContext.FieldCssClass方法根据输入的状态(已修改/有效/无效)获取正确的CSS类名。
    image.png
    如果愿意，我们可以用一些简单的CSS隐藏生成的<input>HTML元素上的红色轮廓。

    1. .input-group > input.invalid
    2. {
    3.   outline: none;
    4. }

    这个CSS告诉浏览器，如果我们的<input>HTML元素直接由应用了输入组CSS类的HTML元素作为父元素，则应用了无效类的<input>HTML元素不应该有红色轮廓。
    image.png