diff --git a/aspnetcore/blazor/forms-and-input-components.md b/aspnetcore/blazor/forms-and-input-components.md index f697847a5ca4..637afb5ec52a 100644 --- a/aspnetcore/blazor/forms-and-input-components.md +++ b/aspnetcore/blazor/forms-and-input-components.md @@ -85,7 +85,7 @@ A form is defined using the Blazor framework's Logger - + @@ -106,7 +106,7 @@ In the preceding `FormExample1` component: * The component is rendered where the `` element appears. * The model is created in the component's `@code` block and held in a private field (`exampleModel`). The field is assigned to 's attribute (`Model`) of the `` element. -* The component (`id="name"`) is an input component for editing string values. The `@bind-Value` directive attribute binds the `exampleModel.Name` model property to the component's property. +* The component is an input component for editing string values. The `@bind-Value` directive attribute binds the `exampleModel.Name` model property to the component's property. * The `HandleSubmit` method is registered as a handler for the callback. The handler is called when the form is submitted by the user. To demonstrate how the preceding component works with [data annotations](xref:mvc/models/validation) validation: @@ -159,7 +159,7 @@ In the preceding `FormExample1` component: * The component is rendered where the `` element appears. * The model is created in the component's `@code` block and held in a private field (`exampleModel`). The field is assigned to 's attribute (`Model`) of the `` element. -* The component (`id="name"`) is an input component for editing string values. The `@bind-Value` directive attribute binds the `exampleModel.Name` model property to the component's property. +* The component is an input component for editing string values. The `@bind-Value` directive attribute binds the `exampleModel.Name` model property to the component's property. * The `HandleValidSubmit` method is assigned to . The handler is called if the form passes validation. * The data annotations validator ( component†) attaches validation support using data annotations: * If the `` form field is left blank when the **`Submit`** button is selected, an error appears in the validation summary ( component‡) ("`The Name field is required.`") and `HandleValidSubmit` is **not** called. @@ -1795,12 +1795,20 @@ Set the `CustomFieldClassProvider` class as the Field CSS Class Provider on the :::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/forms-and-validation/FormExample8.razor" highlight="21"::: -The preceding example checks the validity of all form fields and applies a style to each field. If the form should only apply custom styles to a subset of the fields, make `CustomFieldClassProvider` apply styles conditionally. The following `CustomFieldClassProvider2` example only applies a style to the `Name` field. For any fields with names not matching `Name`, `string.Empty` is returned, and no style is applied. +The preceding example checks the validity of all form fields and applies a style to each field. If the form should only apply custom styles to a subset of the fields, make `CustomFieldClassProvider` apply styles conditionally. The following `CustomFieldClassProvider2` example only applies a style to the `Name` field. For any fields with names not matching `Name`, `string.Empty` is returned, and no style is applied. Using reflection, the field is matched to the model member's property or field name, not an `id` assigned to the HTML entity. `CustomFieldClassProvider2.cs`: :::code language="csharp" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/CustomFieldClassProvider2.cs"::: +> [!NOTE] +> Matching the field name in the preceding example is case sensitive, so a model property member designated "`Name`" must match a conditional check on "`Name`": +> +> * Correctly matches: `fieldIdentifier.FieldName == "Name"` +> * Fails to match: `fieldIdentifier.FieldName == "name"` +> * Fails to match: `fieldIdentifier.FieldName == "NAME"` +> * Fails to match: `fieldIdentifier.FieldName == "nAmE"` + Add an additional property to `ExampleModel`, for example: ```csharp @@ -1811,7 +1819,7 @@ public string? Description { get; set; } Add the `Description` to the `ExampleForm7` component's form: ```razor - + ``` Update the `EditContext` instance in the component's `OnInitialized` method to use the new Field CSS Class Provider: @@ -1820,7 +1828,7 @@ Update the `EditContext` instance in the component's `OnInitialized` method to u editContext?.SetFieldCssClassProvider(new CustomFieldClassProvider2()); ``` -Because a CSS validation class isn't applied to the `Description` field (`id="description"`), it isn't styled. However, field validation runs normally. If more than 10 characters are provided, the validation summary indicates the error: +Because a CSS validation class isn't applied to the `Description` field, it isn't styled. However, field validation runs normally. If more than 10 characters are provided, the validation summary indicates the error: > Description is too long. @@ -1908,7 +1916,7 @@ public string? Description { get; set; } Add the `Description` to the `ExampleForm7` component's form: ```razor - + ``` Update the `EditContext` instance in the component's `OnInitialized` method to use the new Field CSS Class Provider: @@ -1917,7 +1925,7 @@ Update the `EditContext` instance in the component's `OnInitialized` method to u editContext?.SetFieldCssClassProvider(new CustomFieldClassProvider2()); ``` -Because a CSS validation class isn't applied to the `Description` field (`id="description"`), it isn't styled. However, field validation runs normally. If more than 10 characters are provided, the validation summary indicates the error: +Because a CSS validation class isn't applied to the `Description` field, it isn't styled. However, field validation runs normally. If more than 10 characters are provided, the validation summary indicates the error: > Description is too long. @@ -2005,7 +2013,7 @@ public string Description { get; set; } Add the `Description` to the `ExampleForm7` component's form: ```razor - + ``` Update the `EditContext` instance in the component's `OnInitialized` method to use the new Field CSS Class Provider: @@ -2014,7 +2022,7 @@ Update the `EditContext` instance in the component's `OnInitialized` method to u editContext.SetFieldCssClassProvider(new CustomFieldClassProvider2()); ``` -Because a CSS validation class isn't applied to the `Description` field (`id="description"`), it isn't styled. However, field validation runs normally. If more than 10 characters are provided, the validation summary indicates the error: +Because a CSS validation class isn't applied to the `Description` field, it isn't styled. However, field validation runs normally. If more than 10 characters are provided, the validation summary indicates the error: > Description is too long. @@ -2229,8 +2237,117 @@ A side effect of the preceding approach is that a validation summary (. + +In the following example a text area (`