原文鏈接：https://blazor-university.com/forms/accessing-form-state/

獲得表單狀態

源代碼^[1]

有時，我們需要獲得?<EditForm> 子內容中的表單狀態。最常見的用途是當我們需要訪問輸入的 CSS 類時，指示輸入是否被修改或有效/無效。

例如，如果我們使用 Bootstrap 創建一個帶有 @ 符號的電子郵件輸入控件，我們最終可能會得到如下所示的標記。

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

然而，問題在于，當用戶輸入無效值時，CSS 無效類僅應用于 <InputText> 控件。

如果我們想將 CSS 無效類應用到輸入組本身，我們可以使用從 <EditForm> 組件傳遞給我們的 EditContext。

<EditForm> 的 ChildContent 參數是 RenderFragment<EditContext>，這意味著 EditContext 實例通過名為 context 的變量（或我們告訴 Blazor 使用的任何別名）傳遞到其內部內容。有關更多信息，請參閱使用 RenderFragments 模板化組件^[2]。

<EditForm?Model=@MyContact?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>

• 第 1 行

  使用 Context= 語法，我們告訴 Blazor 在傳入其 EditContext 時使用變量名稱 CurrentEditContext。

• 第 6 行

  使用 EditContext.FieldCssClass 方法根據輸入的狀態（修改/有效/無效）獲取正確的 CSS 類名稱。

如果我們愿意，我們可以用一些簡單的 CSS 隱藏生成的 <input> HTML 元素上的紅色輪廓。

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

該 CSS 告訴瀏覽器，如果應用了無效類的 <input> HTML 元素直接由應用了 input-group CSS 類的 HTML 元素作為父元素，則該元素不應具有紅色輪廓。

參考資料

[1]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Forms/AccessingFormState