Adding validation for an action

This topic show to add a validation to any action field that is in the action edit panel. To use the action validator you msut have a directive and view associated with the action (more information about this can be found in the Custom Action Guide).

Locate the wzd file under:

[module_name]/src/main/resources/[action_definition]/html/[action_definition].wzd

Adding a requiredFields

In the action’s wzd file, add a requiredFields property within the properties object.

action {
    label "Send Data To Url"
    wizard "<ff-send-data-to-url view-type='designView'></ff-send-data-to-url>"
    properties {
        actionname "senddatatourl"
        sendto ""
        parametername "formData"
        requiredFields {
            values "sendto":"any", "field_name":"validation_type",  ...
        }
    }
}

The requiredFields object has the above structure, where values contains key value pairs of the field name property and it’s expected validation type.

The current supported validation types are:

• number
• positiveNumber
• any (The only condition is that the field is not empty)
• email

Adding the validation directive

Add the validation directive( ff-action-validator ) to the input field in the following form:

Using the previous sendDataToUrlAction.designView.jsp example located in [module_name]/src/main/resources/[action_definition]/html/[action_definition].designView.jsp

replace:

<div class="col-sm-12">
      <label message-key="fcnt_sendDataToUrlAction.designView.label.sendDataToUrl"></label>
      <input type="text" class="form-control" ng-model="action.sendto">
</div>

with:

<div class="col-md-12 form-group" ng-class="{'has-error': !isFieldValid('sendto')}">
      <label class="control-label" message-key="fcnt_sendEmailAction.designView.label.to"></label>
      <input type="text"
             class="form-control"
             ng-model="action.sendto"
             field-name="sendto"
             validation-type="any"
             ff-action-validator/>
      <span class="help-block" ng-show="!isFieldValid('sendto')">
      <span message-key="ff.label.required"></span>
  </span>
</div>

The validator requires 2 additional attributes, these attributes are :

• field-name (matching the key in the wzd file)
• validation-type (matching the value in the wzd file)

In order to verify whether or not the field is valid, the isFieldValid() function can be used in the view. It takes the field name as a parameter of the associated field.

A third optional attribute (ng-model-options) can be specified on the input field to control when and at what interval the validator executes. A default ng-model-options is provided if one is not specified:

ng-model-options="{
    updateOn: 'default blur',
        debounce: {
            'default': 500,
            'blur': 0
        }
}"

More information on ng-model-options can be found at https://docs.angularjs.org/api/ng/directive/ngModelOptions

The message displayed in the toast when an action is valid/invalid, can be overridden by defining the following resource bundle keys respectively:

angular.ffFormBuilderDirective.message.invalidActionFields = Action '{0}' contains invalid field(s)
angular.ffFormBuilderDirective.message.validActionFields = Action '{0}' fields are valid

Note: {0} is used to insert the name(label defined in the wzd file) of the validated action.