field-element.md

Field Element

The Field Element is the HTML that makes up the control(s) to accept data from the user for a single Field. The Field Element can be:

• Specified manually
• Created by a Field Generator based on the metadata of the model property being displayed and the Field Configuration specified when it's:
  • Displayed as part of a Field
  • Output directly from the Form

Outputting directly from the Form

Tag Helpers variant

To use a Field Generator to output the HTML for a standalone Field Element you can use the <field-element /> tag, e.g.:

<field-element for="SomeField" />
<field-element for="SomeField" fluent-config='c => c.ChainFieldConfigurationMethodsHere()' />
<field-element for="SomeField" placeholder="Placeholder text..." />

To see the different configuration options check out field configuration.

HTML Helpers variant

To use a Field Generator to output the HTML for a standalone Field Element you can use the FieldElementFor extension method on the Form (with optional Field Configuration), e.g.:

@f.FieldElementFor(m => m.SomeField).ChainFieldConfigurationMethodsHere()

The FieldElementFor extension method looks like this:

        /// <summary>
        /// Creates a standalone form field to be output in a form.
        /// </summary>
        /// <example>
        /// @using (var f = Html.BeginChameleonForm()) {
        ///     @f.FieldElementFor(m => m.PositionTitle)
        /// }
        /// </example>
        /// <typeparam name="TModel">The view model type for the current view</typeparam>        
        /// <typeparam name="T">The type of the field being generated</typeparam>
        /// <param name="form">The form the field is being created in</param>
        /// <param name="property">A lamdba expression to identify the field to render the field for</param>
        /// <returns>A field configuration object that allows you to configure the field</returns>
        public static IFieldConfiguration FieldElementFor<TModel, T>(this IForm<TModel> form, Expression<Func<TModel, T>> property)
        {
            var config = new FieldConfiguration();
            config.SetField(() => form.GetFieldGenerator(property).GetFieldHtml(config));
            return config;
        }

---

Default HTML

The HTML for the Field Element will be determined depending on the metadata of the model property being specified and the options in the Field Configuration. The HTML of the Field Element will by default simply be:

%fieldElement%