mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
155 lines
4.8 KiB
Markdown
155 lines
4.8 KiB
Markdown
---
|
|
Added: v2.0.0
|
|
Status: Active
|
|
---
|
|
# FormFieldValidator interface
|
|
|
|
Defines how the input fields of [ADF Form](form.component.md) and
|
|
[ADF Task Details](task-details.component.md) components are validated.
|
|
|
|
## Basic Usage
|
|
|
|
```html
|
|
<adf-form [fieldValidators]="fieldValidators"></adf-form>
|
|
```
|
|
|
|
```ts
|
|
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 an Activiti Form or Activiti 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](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-types.ts)
|
|
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:
|
|
|
|
```ts
|
|
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):
|
|
|
|
```ts
|
|
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:
|
|
|
|
```html
|
|
<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-field.model.md)
|
|
- [Form component](form.component.md)
|