alfresco-ng2-components/docs/core/interfaces/form-field-validator.interface.md

Title, Added, Status

Title	Added	Status
FormFieldValidator interface	v2.0.0	Active

FormFieldValidator interface

Defines how the input fields of Form and Task Details components are validated.

Basic Usage

<adf-form [fieldValidators]="fieldValidators"></adf-form>

import { FORM_FIELD_VALIDATORS } from '@alfresco/adf-core';

@Component({...})
export class AppComponent {

    fieldValidators = [
        // default set of ADF validators if needed
        ...FORM_FIELD_VALIDATORS,

        // custom validator
        new MyValidator()
    ];

}

export class MyValidator implements FormFieldValidator {

    isSupported(field: FormFieldModel): boolean {
        // Check if this validation can be used with 'field'.
    }
    
    validate(field: FormFieldModel): boolean {
        // Perform the validation.
    }
}

Methods

isSupported(field: FormFieldModel): boolean; Does this validator support the type of data used in field?

validate(field: FormFieldModel): boolean; Perform validation on field.

Details

You can supply a set of validator objects for a form using its fieldValidators property. ADF will determine if a validator should be used with a given field by calling its isSupported method, passing the field's FormFieldModel as a parameter. If the validator does support the field then its validate method will be called on the FormFieldModel during the validation phase.

Several validator classes are predefined for you to use:

Validator name	Checks that:
RequiredFieldValidator	Field is not left blank
NumberFieldValidator	Field contains numeric data
MinLengthFieldValidator	Field text has at least a minimum number of characters
MaxLengthFieldValidator	Field text has no more than a maximum number of characters
MinValueFieldValidator	Numeric field's value is greater than a lower limit
MaxValueFieldValidator	Numeric field's vaue is less than an upper limit
RegExFieldValidator	Field text matches a regular expression
DateFieldValidator	Field contains a date in the correct format
MinDateFieldValidator	Date within a field occurs after a certain starting point
MaxDateFieldValidator	Date within a field occurs before a certain end point

The FORM_FIELD_VALIDATORS array contains an instance of each of these classes. You can assign this to the fieldValidators property of a Form or Task Details component to enable standard validation.

Custom validators

You can implement your own custom validator classes if the standard set doesn't provide the features you need. For example, you could check for consistency between separate fields on the form (currency values adding up to a given total, say).

The type property of FormFieldModel is often used in the isSupported function, since validation methods typically apply only to specific types of data. The FormFieldTypes class defines convenient constants for the type strings.

The validator in the example below simply checks that "admin" is not entered into a text field:

import { FormFieldModel, FormFieldTypes, FormFieldValidator } from '@alfresco/adf-core';

export class DemoFieldValidator implements FormFieldValidator {

    isSupported(field: FormFieldModel): boolean {
        return field && field.type === FormFieldTypes.TEXT;
    }

    validate(field: FormFieldModel): boolean {
        if (this.isSupported(field)) {
            if (field.value && field.value.toLowerCase() === 'admin') {
                field.validationSummary = 'Sorry, the value cannot be "admin".';
                return false;
            }
        }
        return true;
    }

}

You will usually want to extend the existing FORM_FIELD_VALIDATORS set rather than replace it entirely (although you can do this if necessary):

import { DemoFieldValidator } from './demo-field-validator';

@Component({...})
export class AppComponent {

    fieldValidators = [
        ...FORM_FIELD_VALIDATORS,
        new DemoFieldValidator()
    ];

}

You can now use the 'fieldValidators' property of the Form or Task Details components to assign your custom validator set:

<activiti-task-details
    [fieldValidators]="fieldValidators"
    taskId="123">
</<activiti-task-details>

<!-- OR -->

<adf-form
    [fieldValidators]="fieldValidators"
    taskI="123">
</adf-form>

If you now run the application and try to enter "admin" in one of the text fields (either optional or required), you should see the following error:

See also

• Form field model
• Form component