Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ActiveForm

ActiveForm is a widget that builds an interactive HTML form for one or multiple data models.

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

author

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

Hierarchy

Index

Constructors

Properties

_fields: any[] = []

The ActiveField objects that are currently active

action: string = ''

The form action URL.

see

method for specifying the HTTP method for this form.

ajaxDataType: string = 'json'

The type of data that you're expecting back from the server.

ajaxParam: string = 'ajax'

The name of the GET parameter indicating the validation request is an AJAX request.

attributes: any[] = []

The client validation options for individual attributes. Each element of the array represents the validation options for a particular attribute.

internal
enableAjaxValidation: boolean = false

Whether to enable AJAX-based data validation. If ActiveField.enableAjaxValidation is set, its value will take precedence for that input field.

enableClientScript: boolean = true

Whether to hook up pwoli.activeForm JavaScript plugin. This property must be set true if you want to support client validation and/or AJAX validation, or if you want to take advantage of the yii.activeForm plugin. When this is false, the form will not generate any JavaScript.

see

registerClientScript

enableClientValidation: boolean = true

Whether to enable client-side data validation. If ActiveField.enableClientValidation is set, its value will take precedence for that input field.

enablePjax: boolean = true

Whether to enable Pjax on this widget.

encodeErrorSummary: boolean = true

Whether to perform encoding on the error summary.

errorCssClass: string = 'has-error'

The CSS class that is added to a field container when the associated attribute has validation error.

errorSummaryCssClass: string = 'error-summary'

The default CSS class for the error summary container.

see

errorSummary

fieldClass: typeof ActiveField = ActiveField

The default field class name when calling [[field()]] to create a new field.

see

fieldConfig

fieldConfig: {} | ((model: Model, attribute: string) => {}) = {}

The default configuration used by [[field()]] when creating a new field object. This can be either a configuration array or an anonymous function returning a configuration array. If the latter, the signature should be as follows:

function (model, attribute)

The value of this property will be merged recursively with the $options parameter passed to field.

see

fieldClass

initialization: Promise<void>

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

method: string = 'post'

The form submission method. This should be either post or get. Defaults to post.

When you set this to get you may see the url parameters repeated on each request. This is because the default value of action is set to be the current request url and each submit will add new parameters instead of replacing existing ones. You may set action explicitly to avoid this:

let form = new ActiveForm({
method: 'get',
action: '/my-url',
});
options: {} = {}

The HTML attributes (name-value pairs) for the form tag.

see

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

Type declaration

  • [key: string]: any
requiredCssClass: string = 'required'

The CSS class that is added to a field container when the associated attribute is required.

scrollToError: boolean = true

Whether to scroll to the first error after validation.

scrollToErrorOffset: number = 0

Offset in pixels that should be added when scrolling to the first error.

successCssClass: string = 'has-success'

The CSS class that is added to a field container when the associated attribute is required.

validateOnBlur: boolean = true

Whether to perform validation when an input field loses focus. If ActiveField.validateOnBlur is set, its value will take precedence for that input field.

validateOnChange: boolean = true

Whether to perform validation when the value of an input field is changed. If ActiveField.validateOnChange is set, its value will take precedence for that input field.

validateOnSubmit: boolean = true

Whether to perform validation when the form is submitted.

validateOnType: boolean = false
var

bool whether to perform validation while the user is typing in an input field. If ActiveField.validateOnType is set, its value will take precedence for that input field.

see

validationDelay

validatingCssClass: string = 'validating'

The CSS class that is added to a field container when the associated attribute is being validated.

validationDelay: number = 500

Number of milliseconds that the validation should be delayed when the user types in the field and validateOnType is set true. If ActiveField.validationDelay is set, its value will take precedence for that input field.

validationStateOn: string = 'container'
var

string where to render validation state class Could be either "container" or "input". Default is "container".

validationUrl: string

The URL for performing AJAX-based validation. If this property is not set, it will take the value of the form's action attribute.

autoIdPrefix: string = 'w'

The prefix to the automatically generated widget IDs.

see

getId

counter: number = 0

A counter used to generate id for widgets.

internal

Methods

  • begin(): Promise<string>
  • beginField(model: Model, attribute: string, options?: {}): string
  • Begins a form field. This method will create a new form field and returns its opening tag. You should call endField afterwards.

    see

    endField

    see

    field

    Parameters

    • model: Model

      the data model.

    • attribute: string

      the attribute name or expression. See Html.getAttributeName for the format about attribute expression.

    • options: {} = {}

      the additional configurations for the field object.

      • [key: string]: any

    Returns string

    the opening tag.

  • end(): Promise<string>
  • Ends the form with </form> tag. This registers the necessary JavaScript code and renders the form open and close tags.

    Returns Promise<string>

  • endField(): string
  • Ends a form field. This method will return the closing tag of an active form field started by beginField.

    throws

    Error if this method is called without a prior beginField call.

    Returns string

    the closing tag of the form field.

  • errorSummary(models: Model[], options?: {}): void
  • Generates a summary of the validation errors. If there is no validation error, an empty error summary markup will still be generated, but it will be hidden.

    see

    errorSummaryCssClass

    Parameters

    • models: Model[]

      the model(s) associated with this form.

    • options: {} = {}

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

      • header: string, the header HTML for the error summary. If not set, a default prompt string will be used.
      • footer: string, the footer HTML for the error summary.

      The rest of the options will be rendered as the attributes of the container 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 void

    string the generated error summary.

  • Generates a form field. A form field is associated with a model and an attribute. It contains a label, an input and an error message and use them to interact with end users to collect their inputs for the attribute.

    see

    fieldConfig

    Parameters

    • model: Model

      the data model.

    • attribute: string

      the attribute name or expression. See Html.getAttributeName for the format about attribute expression.

    • options: {} = {}

      the additional configurations for the field object. These are properties of ActiveField or a subclass, depending on the value of fieldClass.

      • [key: string]: any

    Returns ActiveField

    ActiveField the created ActiveField object.

  • getClientOptions(): {}
  • getId(autogenerate?: boolean): string
  • Returns the ID of the widget.

    Parameters

    • autogenerate: boolean = true

    Returns string

    ID of the widget.

  • init(): Promise<void>
  • registerAssets(): void
  • registerClientScript(): Promise<void>
  • render(): Promise<string>
  • Renders a widget.

    throws

    InvalidArgumentException if the view file does not exist.

    Returns Promise<string>

    string the rendering result.

  • run(): Promise<void>
  • validate(model: Model, attributes?: string[]): Promise<{}>
  • Validates one or several models and returns an error message array indexed by the attribute IDs. This is a helper method that simplifies the way of writing AJAX validation code.

    For example, you may use the following code in a controller action to respond to an AJAX validation request:

    let model = new Post;
    model.load(request.body);
    if (request.xhr) {
    response.setHeader('Content-Type', 'application/json');
    response.write(JSON.stringify(await ActiveForm.validate(model)));
    }
    // ... respond to non-AJAX request ...

    To validate multiple models, simply pass each model as a parameter to this method, like the following:

    ActiveForm.validate($model1, $model2, ...);
    

    Parameters

    • model: Model

      the model to be validated.

    • attributes: string[] = null

      list of attributes that should be validated. If this parameter is empty, it means any attribute listed in the applicable validation rules should be validated.

      When this method is used to validate multiple models, this parameter will be interpreted as a model.

    Returns Promise<{}>

    the error message array indexed by the attribute IDs.

  • validateMultiple(models: Model[], attributes?: string[]): Promise<{}>
  • Validates an array of model instances and returns an error message array indexed by the attribute IDs. This is a helper method that simplifies the way of writing AJAX validation code for tabular input.

    For example, you may use the following code in a controller action to respond to an AJAX validation request:

    // ... load models ...
    if (request.xhr) {
    response.setHeader('Content-Type', 'application/json');
    response.write(JSON.stringify(await ActiveForm.validateMultiple(model)));
    }
    // ... respond to non-AJAX request ...

    Parameters

    • models: Model[]

      an array of models to be validated.

    • attributes: string[] = null

      list of attributes that should be validated. If this parameter is empty, it means any attribute listed in the applicable validation rules should be validated.

    Returns Promise<{}>

    the error message array indexed by the attribute IDs.

Generated using TypeDoc