Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ActiveField

ActiveField represents a form input field within an ActiveForm.

For more details and usage information on ActiveField, see the guide article on forms.

author

Mahesh S Warrier https://github.com/codespede

Hierarchy

Index

Constructors

Properties

_inputId: string

This property holds a custom input id if it was set using inputOptions or in one of the options parameters of the input* methods.

_skipLabelFor: boolean = false

If "for" field label attribute should be skipped.

addAriaAttributes: boolean = true

Adds aria HTML attributes aria-required and aria-invalid for inputs

attribute: string

The model attribute that this field is associated with.

clientValidators: {} = ...

The params with which /assets/js/activeForm.js should perform the client validation.

Type declaration

  • [key: string]: (params: {}) => string
      • (params: {}): string
      • Parameters

        • params: {}
          • [key: string]: any

        Returns string

enableAjaxValidation: boolean

Whether to enable AJAX-based data validation. If not set, it will take the value of ActiveForm.enableAjaxValidation.

enableClientValidation: boolean

Whether to enable client-side data validation. If not set, it will take the value of ActiveForm.enableClientValidation.

errorOptions: {} = ...
var

array the default options for the error tags. The parameter passed to error will be merged with this property when rendering the error tag. The following special options are recognized:

  • tag: the tag name of the container element. Defaults to div. Setting it to false will not render a container tag. See also Html.tag.
  • encode: whether to encode the error output. Defaults to true.

If you set a custom id for the error element, you may need to adjust the selectors accordingly.

see

Html.renderTagAttributes for details on how attributes are being rendered.

Type declaration

  • [key: string]: any

The form that this field is associated with.

hintOptions: {} = ...

The default options for the hint tags. The parameter passed to hint will be merged with this property when rendering the hint tag. The following special options are recognized:

  • tag: the tag name of the container element. Defaults to div. Setting it to false will not render a container tag. See also Html.tag.
see

Html.renderTagAttributes for details on how attributes are being rendered.

Type declaration

  • [key: string]: any
initialization: Promise<void>

A Promise which resolves when this Component has been successfully initialized.

inputOptions: {} = ...

The default options for the input tags. The parameter passed to individual input methods (e.g. textInput) will be merged with this property when rendering the input tag.

If you set a custom id for the input element, you may need to adjust the selectors accordingly.

see

Html.renderTagAttributes for details on how attributes are being rendered.

Type declaration

  • [key: string]: any
labelOptions: {} = ...

The default options for the label tags. The parameter passed to label will be merged with this property when rendering the label tag.

see

Html.renderTagAttributes for details on how attributes are being rendered.

Type declaration

  • [key: string]: any
model: Model

The data model that this field is associated with.

options: {} = ...

The HTML attributes (name-value pairs) for the field container tag. The values will be HTML-encoded using Html.encode. If a value is null, the corresponding attribute will not be rendered. The following special options are recognized:

  • tag: the tag name of the container element. Defaults to div. Setting it to false will not render a container tag. See also Html.tag.

If you set a custom id for the container element, you may need to adjust the selectors accordingly.

see

Html.renderTagAttributes for details on how attributes are being rendered.

Type declaration

  • [key: string]: any
parts: {} = {}

Different parts of the field (e.g. input, label). This will be used together with template to generate the final field HTML code. The keys are the token names in template, while the values are the corresponding HTML code. Valid tokens include {input}, {label} and {error}. Note that you normally don't need to access this property directly as it is maintained by various methods of this class.

Type declaration

  • [key: string]: string
selectors: {} = {}

The jQuery selectors for selecting the container, input and error tags. The array keys should be container, input, and/or error, and the array values are the corresponding selectors. For example, { input: '#my-input'}.

The container selector is used under the context of the form, while the input and the error selectors are used under the context of the container.

You normally do not need to set this property as the default selectors should work well for most cases.

Type declaration

  • [key: string]: string
template: string = '{label}\n{input}\n{hint}\n{error}'

The template that is used to arrange the label, the input field, the error message and the hint text. The following tokens will be replaced when [[render()]] is called: {label}, {input}, {error} and {hint}.

validateOnBlur: boolean

Whether to perform validation when the input field loses focus. If not set, it will take the value of ActiveForm.validateOnBlur.

validateOnChange: boolean

Whether to perform validation when the value of the input field is changed. If not set, it will take the value of ActiveForm.validateOnChange.

validateOnType: boolean

Whether to perform validation while the user is typing in the input field. If not set, it will take the value of ActiveForm.validateOnType.

see

validationDelay

validationDelay: number

Number of milliseconds that the validation should be delayed when the user types in the field and validateOnType is set true. If not set, it will take the value of ActiveForm.validationDelay.

Methods

  • __toString(): Promise<string>
  • Returns the string representation of this object.

    Returns Promise<string>

    string the string representation of this object.

  • addErrorClassIfNeeded(options: {}): void
  • Adds validation class to the input options if needed.

    Parameters

    • options: {}

      input options

      • [key: string]: any

    Returns void

  • addRoleAttributes(options: {}, role: any): void
  • Add role attributes to the input options

    Parameters

    • options: {}

      input options

      • [key: string]: any
    • role: any

    Returns void

  • adjustLabelFor(options?: {}): void
  • Adjusts the for attribute for the label based on the input options.

    Parameters

    • options: {} = {}

      the input options.

      • [key: string]: any

    Returns void

  • begin(): string
  • checkbox(options?: {}, enclosedByLabel?: boolean): ActiveField
  • Renders a checkbox. This method will generate the checked tag attribute according to the model attribute value.

    Parameters

    • options: {} = {}

      the tag options in terms of name-value pairs. The following options are specially handled:

      • uncheck: string, the value associated with the uncheck state of the radio button. If not set, it will take the default value 0. This method will render a hidden input so that if the radio button is not checked and is submitted, the value of this attribute will still be submitted to the server via the hidden input. If you do not want any hidden input, you should explicitly set this option as null.
      • label: string, a label displayed next to the checkbox. It will NOT be HTML-encoded. Therefore you can pass in HTML code such as an image tag. If this is coming from end users, you should encode it to prevent XSS attacks. When this option is specified, the checkbox will be enclosed by a label tag. If you do not want any label, you should explicitly set this option as null.
      • labelOptions: array, the HTML attributes for the label tag. This is only used when the label option is specified.

      The rest of the options will be rendered as the attributes of the resulting tag. The values will be HTML-encoded using Html.encode. If a value is null, the corresponding attribute will not be rendered.

      If you set a custom id for the input element, you may need to adjust the selectors accordingly.

      • [key: string]: any
    • enclosedByLabel: boolean = true

      whether to enclose the checkbox within the label. If true, the method will still use template to layout the checkbox and the error message except that the checkbox is enclosed by the label tag.

    Returns ActiveField

    the field object itself.

  • Renders a list of checkboxes. A checkbox list allows multiple selection, like listBox. As a result, the corresponding submitted value is an array. The selection of the checkbox list is taken from the value of the model attribute.

    Parameters

    • items: []

      the data item used to generate the checkboxes. The array values are the labels, while the array keys are the corresponding checkbox values.

    • options: {} = {}

      options (name => config) for the checkbox list. For the list of available options please refer to the $options parameter of Html.activeCheckboxList.

      • [key: string]: any

    Returns ActiveField

    the field object itself.

  • clientValidateAttribute(validator: string, criteria: boolean | {}): string
  • Returns the JavaScript needed for performing client-side validation.

    Calls getClientOptions to generate options array for client-side validation.

    You may override this method to return the JavaScript validation code if the validator can support client-side validation.

    The following JavaScript variables are predefined and can be used in the validation code:

    • attribute: an object describing the the attribute being validated.
    • value: the value being validated.
    • messages: an array used to hold the validation error messages for the attribute.
    • deferred: an array used to hold deferred objects for asynchronous validation
    • $form: a jQuery object containing the form element

    The attribute object contains the following properties:

    • id: a unique ID identifying the attribute (e.g. "loginform-username") in the form
    • name: attribute name or expression (e.g. "[0]content" for tabular input)
    • container: the jQuery selector of the container of the input field
    • input: the jQuery selector of the input field under the context of the form
    • error: the jQuery selector of the error tag under the context of the container
    • status: status of the input field, 0: empty, not entered before, 1: validated, 2: pending validation, 3: validating
    see

    getClientOptions

    see

    ActiveForm.enableClientValidation

    Parameters

    Returns string

    the client-side validation script. Null if the validator does not support client-side validation.

  • doAddAriaAttributes(options: {}): void
  • Adds aria attributes to the input options.

    Parameters

    • options: {}

      input options

      • [key: string]: any

    Returns void

  • Renders a drop-down list. The selection of the drop-down list is taken from the value of the model attribute.

    Parameters

    • items: []

      the option data items. The array keys are option values, and the array values are the corresponding option labels. The array can also be nested (i.e. some array values are arrays too). For each sub-array, an option group will be generated whose label is the key associated with the sub-array. If you have a list of data models, you may convert them into the format described above using [[ArrayHelper.map]].

      Note, the values and labels will be automatically HTML-encoded by this method, and the blank spaces in the labels will also be HTML-encoded.

    • options: {} = {}

      the tag options in terms of name-value pairs.

      For the list of available options please refer to the $options parameter of Html.activeDropDownList.

      If you set a custom id for the input element, you may need to adjust the selectors accordingly.

      • [key: string]: any

    Returns ActiveField

    the field object itself.

  • end(): string
  • Generates a tag that contains the first validation error of attribute. Note that even if there is no validation error, this method will still return an empty error tag.

    see

    errorOptions

    Parameters

    • options: false | {} = {}

      the tag options in terms of name-value pairs. It will be merged with errorOptions. The options will be rendered as the attributes of the resulting tag. The values will be HTML-encoded using Html.encode. If this parameter is false, no error tag will be rendered.

      The following options are specially handled:

      • tag: this specifies the tag name. If not set, div will be used. See also Html.tag.

      If you set a custom id for the error element, you may need to adjust the selectors accordingly.

    Returns ActiveField

    the field object itself.

  • Renders a file input. This method will generate the name and value tag attributes automatically for the model attribute unless they are explicitly specified in options.

    Parameters

    • options: {} = {}

      the tag options in terms of name-value pairs. These will be rendered as the attributes of the resulting tag. The values will be HTML-encoded using Html.encode.

      If you set a custom id for the input element, you may need to adjust the selectors accordingly.

      • [key: string]: any

    Returns ActiveField

    the field object itself.

  • getClientOptions(): {}
  • getInputId(): string
  • Renders a hidden input.

    Note that this method is provided for completeness. In most cases because you do not need to validate a hidden input, you should not need to use this method. Instead, you should use Html.activeHiddenInput.

    This method will generate the name and value tag attributes automatically for the model attribute unless they are explicitly specified in options.

    Parameters

    • options: {} = {}
      • [key: string]: any

    Returns ActiveField

    the field object itself.

  • hint(content: string | false, options?: {}): ActiveField
  • Renders the hint tag.

    Parameters

    • content: string | false

      the hint content. If null, the hint will be generated via Model.getAttributeHint. If false, the generated field will not contain the hint part. Note that this will NOT be encoded.

    • options: {} = {}

      the tag options in terms of name-value pairs. These will be rendered as the attributes of the hint tag. The values will be HTML-encoded using Html.encode.

      The following options are specially handled:

      • tag: this specifies the tag name. If not set, div will be used. See also Html.tag.
      • [key: string]: any

    Returns ActiveField

    the field object itself.

  • init(): Promise<void>
  • Initializes the object. This method is invoked at the end of the constructor after the object is initialized with the given configuration.

    Returns Promise<void>

  • Renders an input tag.

    Parameters

    • type: string

      the input type (e.g. text, password)

    • options: {} = {}

      the tag options in terms of name-value pairs. These will be rendered as the attributes of the resulting tag. The values will be HTML-encoded using Html.encode.

      If you set a custom id for the input element, you may need to adjust the selectors accordingly.

      • [key: string]: any

    Returns ActiveField

    the field object itself.

  • isAjaxValidationEnabled(): boolean
  • isClientValidationEnabled(): boolean
  • Generates a label tag for attribute.

    Parameters

    • label: any = null

      the label to use. If null, the label will be generated via Model.getAttributeLabel. If false, the generated field will not contain the label part. Note that this will NOT be encoded.

    • options: {} = {}

      the tag options in terms of name-value pairs. It will be merged with labelOptions. The options will be rendered as the attributes of the resulting tag. The values will be HTML-encoded using Html.encode. If a value is null, the corresponding attribute will not be rendered.

      • [key: string]: any

    Returns ActiveField

    the field object itself.

  • Renders a list box. The selection of the list box is taken from the value of the model attribute.

    Parameters

    • items: []

      the option data items. The array keys are option values, and the array values are the corresponding option labels. The array can also be nested (i.e. some array values are arrays too). For each sub-array, an option group will be generated whose label is the key associated with the sub-array. If you have a list of data models, you may convert them into the format described above using [[ArrayHelper.map]].

      Note, the values and labels will be automatically HTML-encoded by this method, and the blank spaces in the labels will also be HTML-encoded.

    • options: {} = {}

      the tag options in terms of name-value pairs.

      For the list of available options please refer to the $options parameter of Html.activeListBox.

      If you set a custom id for the input element, you may need to adjust the selectors accordingly.

      • [key: string]: any

    Returns ActiveField

    the field object itself.

  • Renders a password input. This method will generate the name and value tag attributes automatically for the model attribute unless they are explicitly specified in options.

    Parameters

    • options: {} = {}

      the tag options in terms of name-value pairs. These will be rendered as the attributes of the resulting tag. The values will be HTML-encoded using Html.encode.

      If you set a custom id for the input element, you may need to adjust the selectors accordingly.

      • [key: string]: any

    Returns ActiveField

    the field object itself.

  • radio(options?: {}, enclosedByLabel?: boolean): ActiveField
  • Renders a radio button. This method will generate the checked tag attribute according to the model attribute value.

    Parameters

    • options: {} = {}

      the tag options in terms of name-value pairs. The following options are specially handled:

      • uncheck: string, the value associated with the uncheck state of the radio button. If not set, it will take the default value 0. This method will render a hidden input so that if the radio button is not checked and is submitted, the value of this attribute will still be submitted to the server via the hidden input. If you do not want any hidden input, you should explicitly set this option as null.
      • label: string, a label displayed next to the radio button. It will NOT be HTML-encoded. Therefore you can pass in HTML code such as an image tag. If this is coming from end users, you should encode it to prevent XSS attacks. When this option is specified, the radio button will be enclosed by a label tag. If you do not want any label, you should explicitly set this option as null.
      • labelOptions: array, the HTML attributes for the label tag. This is only used when the label option is specified.

      The rest of the options will be rendered as the attributes of the resulting tag. The values will be HTML-encoded using Html.encode. If a value is null, the corresponding attribute will not be rendered.

      If you set a custom id for the input element, you may need to adjust the selectors accordingly.

      • [key: string]: any
    • enclosedByLabel: boolean = true

      whether to enclose the radio within the label. If true, the method will still use template to layout the radio button and the error message except that the radio is enclosed by the label tag.

    Returns ActiveField

    the field object itself.

  • Renders a list of radio buttons. A radio button list is like a checkbox list, except that it only allows single selection. The selection of the radio buttons is taken from the value of the model attribute.

    Parameters

    • items: []

      the data item used to generate the radio buttons. The array values are the labels, while the array keys are the corresponding radio values.

    • options: {} = {}

      options (name => config) for the radio button list. For the list of available options please refer to the options parameter of Html.activeRadioList.

      • [key: string]: any

    Returns ActiveField

    the field object itself.

  • render(content?: string | ((field: ActiveField) => string)): Promise<string>
  • Renders the whole field. This method will generate the label, error tag, input tag and hint tag (if any), and assemble them into HTML according to template.

    Parameters

    • content: string | ((field: ActiveField) => string) = null

      the content within the field container. If null (not set), the default methods will be called to generate the label, error tag and input tag, and use them as the content. If a callback, it will be called to generate the content. The signature of the callback should be:

      function (field) {
      return html;
      }

    Returns Promise<string>

    the rendering result.

  • Renders a text input. This method will generate the name and value tag attributes automatically for the model attribute unless they are explicitly specified in options.

    Parameters

    • options: {} = {}

      the tag options in terms of name-value pairs. These will be rendered as the attributes of the resulting tag. The values will be HTML-encoded using Html.encode.

      The following special options are recognized:

      • maxlength: int|bool, when maxlength is set true and the model attribute is validated by a string validator, the maxlength option will take the value of [[StringValidator.max]].

      Note that if you set a custom id for the input element, you may need to adjust the value of selectors accordingly.

      • [key: string]: any

    Returns ActiveField

    the field object itself.

  • Renders a text area. The model attribute value will be used as the content in the textarea.

    Parameters

    • options: {} = {}

      the tag options in terms of name-value pairs. These will be rendered as the attributes of the resulting tag. The values will be HTML-encoded using Html.encode.

      If you set a custom id for the textarea element, you may need to adjust the selectors accordingly.

      • [key: string]: any

    Returns ActiveField

    the field object itself.

Generated using TypeDoc