inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-10-08 14:51:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1091] Validation layer enhancements for Form component (#2168)

Browse Source 
* form/field validation events

* code cleanup

* unit tests

* improve validator management

- form now owns field validators
- readme updates
- unit test updates
This commit is contained in:
Denys Vuika
2017-08-03 10:21:25 +01:00
committed by Mario Romano
parent 1d9564a58c
commit 123ae3618a
15 changed files with 409 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ng2-components/ng2-activiti-form/src/components/start-form.component.spec.ts
View File

@@ -27,8 +27,8 @@ import { EcmModelService } from './../services/ecm-model.service';
import { FormService } from './../services/form.service';
import { WidgetVisibilityService } from './../services/widget-visibility.service';
import { ActivitiContentComponent } from './activiti-content.component';
import { StartFormComponent } from './start-form.component';
import { FormFieldComponent } from './form-field/form-field.component';
import { StartFormComponent } from './start-form.component';
import { MASK_DIRECTIVE } from './widgets/index';
import { WIDGET_DIRECTIVES } from './widgets/index';

3
ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.spec.ts
View File

@@ -25,6 +25,7 @@ import { FormFieldTypes } from '../core/form-field-types';
import { EcmModelService } from './../../../services/ecm-model.service';
import { FormService } from './../../../services/form.service';
import { FormFieldModel } from './../core/form-field.model';
import { FormModel } from './../core/form.model';
import { AttachWidgetComponent } from './attach.widget';
describe('AttachWidgetComponent', () => {
@@ -146,7 +147,7 @@ describe('AttachWidgetComponent', () => {
});
it('should reset', () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.UPLOAD,
value: [{name: 'filename'}]
});

40
ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts
View File

@@ -23,19 +23,7 @@ import { ContainerColumnModel } from './container-column.model';
import { FormFieldMetadata } from './form-field-metadata';
import { FormFieldOption } from './form-field-option';
import { FormFieldTypes } from './form-field-types';
import {
DateFieldValidator,
FormFieldValidator,
MaxDateFieldValidator,
MaxLengthFieldValidator,
MaxValueFieldValidator,
MinDateFieldValidator,
MinLengthFieldValidator,
MinValueFieldValidator,
NumberFieldValidator,
RegExFieldValidator,
RequiredFieldValidator
} from './form-field-validator';
import { NumberFieldValidator } from './form-field-validator';
import { FormWidgetModel } from './form-widget.model';
import { FormModel } from './form.model';
@@ -88,7 +76,6 @@ export class FormFieldModel extends FormWidgetModel {
// util members
emptyOption: FormFieldOption;
validationSummary: string;
validators: FormFieldValidator[] = [];
get value(): any {
return this._value;
@@ -119,13 +106,11 @@ export class FormFieldModel extends FormWidgetModel {
validate(): boolean {
this.validationSummary = null;
// TODO: consider doing that on value setter and caching result
if (this.validators && this.validators.length > 0) {
for (let i = 0; i < this.validators.length; i++) {
if (!this.validators[i].validate(this)) {
this._isValid = false;
return this._isValid;
}
let validators = this.form.fieldValidators || [];
for (let validator of validators) {
if (!validator.validate(this)) {
this._isValid = false;
return this._isValid;
}
}
@@ -201,19 +186,6 @@ export class FormFieldModel extends FormWidgetModel {
this.emptyOption = this.options[0];
}
this.validators = [
new RequiredFieldValidator(),
new NumberFieldValidator(),
new MinLengthFieldValidator(),
new MaxLengthFieldValidator(),
new MinValueFieldValidator(),
new MaxValueFieldValidator(),
new RegExFieldValidator(),
new DateFieldValidator(),
new MinDateFieldValidator(),
new MaxDateFieldValidator()
];
this.updateForm();
}

204
ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.spec.ts
View File

@@ -15,8 +15,10 @@
* limitations under the License.
*/
import { ValidateFormFieldEvent } from './../../../events/validate-form-field.event';
import { ValidateFormEvent } from './../../../events/validate-form.event';
import { FormService } from './../../../services/form.service';
import { ContainerModel } from './container.model';
// import { FormValues } from './form-values';
import { FormFieldTypes } from './form-field-types';
import { FormOutcomeModel } from './form-outcome.model';
import { FormModel } from './form.model';
@@ -24,6 +26,12 @@ import { TabModel } from './tab.model';
describe('FormModel', () => {
let formService: FormService;
beforeEach(() => {
formService = new FormService(null, null, null);
});
it('should store original json', () => {
let json = {};
let form = new FormModel(json);
@@ -197,71 +205,6 @@ describe('FormModel', () => {
expect(tab2.fields[0].id).toBe('field2');
});
/*
it('should apply external data', () => {
let data: FormValues = {
field1: 'one',
field2: 'two'
};
let json = {
fields: [
{
fieldType: 'ContainerRepresentation',
id: 'container1',
type: 'container',
numberOfColumns: 2,
fields: {
'1': [
{
fieldType: 'FormFieldRepresentation',
type: 'text',
id: 'field1'
}
],
'2': [
{
fieldType: 'FormFieldRepresentation',
type: 'text',
id: 'field2'
},
{
fieldType: 'FormFieldRepresentation',
type: 'text',
id: 'field3',
value: 'original-value'
}
]
}
}
]
};
let form = new FormModel(json, data);
expect(form.fields.length).toBe(1);
let container = <ContainerModel> form.fields[0];
expect(container.columns.length).toBe(2);
let column1 = container.columns[0];
let column2 = container.columns[1];
expect(column1.fields.length).toBe(1);
expect(column2.fields.length).toBe(2);
let field1 = column1.fields[0];
expect(field1.id).toBe('field1');
expect(field1.value).toBe('one');
let field2 = column2.fields[0];
expect(field2.id).toBe('field2');
expect(field2.value).toBe('two');
let field3 = column2.fields[1];
expect(field3.id).toBe('field3');
expect(field3.value).toBe('original-value');
});
*/
it('should create standard form outcomes', () => {
let json = {
fields: [
@@ -309,4 +252,133 @@ describe('FormModel', () => {
expect(form.outcomes[1].id).toBe('custom-1');
expect(form.outcomes[1].isSystem).toBeFalsy();
});
it('should raise validation event when validating form', (done) => {
const form = new FormModel({}, null, false, formService);
formService.validateForm.subscribe(() => done());
form.validateForm();
});
it('should raise validation event when validating field', (done) => {
const form = new FormModel({}, null, false, formService);
const field = jasmine.createSpyObj('FormFieldModel', ['validate']);
formService.validateFormField.subscribe(() => done());
form.validateField(field);
});
it('should skip form validation when default behaviour prevented', () => {
const form = new FormModel({}, null, false, formService);
let prevented = false;
formService.validateForm.subscribe((event: ValidateFormEvent) => {
event.isValid = false;
event.preventDefault();
prevented = true;
});
const field = jasmine.createSpyObj('FormFieldModel', ['validate']);
spyOn(form, 'getFormFields').and.returnValue([field]);
form.validateForm();
expect(prevented).toBeTruthy();
expect(form.isValid).toBeFalsy();
expect(field.validate).not.toHaveBeenCalled();
});
it('should skip field validation when default behaviour prevented', () => {
const form = new FormModel({}, null, false, formService);
let prevented = false;
formService.validateFormField.subscribe((event: ValidateFormFieldEvent) => {
event.isValid = false;
event.preventDefault();
prevented = true;
});
const field = jasmine.createSpyObj('FormFieldModel', ['validate']);
form.validateField(field);
expect(prevented).toBeTruthy();
expect(form.isValid).toBeFalsy();
expect(field.validate).not.toHaveBeenCalled();
});
it('should validate fields when form validation not prevented', () => {
const form = new FormModel({}, null, false, formService);
let validated = false;
formService.validateForm.subscribe((event: ValidateFormEvent) => {
validated = true;
});
const field = jasmine.createSpyObj('FormFieldModel', ['validate']);
spyOn(form, 'getFormFields').and.returnValue([field]);
form.validateForm();
expect(validated).toBeTruthy();
expect(field.validate).toHaveBeenCalled();
});
it('should validate field when field validation not prevented', () => {
const form = new FormModel({}, null, false, formService);
let validated = false;
formService.validateFormField.subscribe((event: ValidateFormFieldEvent) => {
validated = true;
});
const field = jasmine.createSpyObj('FormFieldModel', ['validate']);
form.validateField(field);
expect(validated).toBeTruthy();
expect(field.validate).toHaveBeenCalled();
});
it('should validate form when field validation not prevented', () => {
const form = new FormModel({}, null, false, formService);
spyOn(form, 'validateForm').and.stub();
let validated = false;
formService.validateFormField.subscribe((event: ValidateFormFieldEvent) => {
validated = true;
});
const field: any = {
validate() {
return true;
}
};
form.validateField(field);
expect(validated).toBeTruthy();
expect(form.validateForm).toHaveBeenCalled();
});
it('should not validate form when field validation prevented', () => {
const form = new FormModel({}, null, false, formService);
spyOn(form, 'validateForm').and.stub();
let prevented = false;
formService.validateFormField.subscribe((event: ValidateFormFieldEvent) => {
event.preventDefault();
prevented = true;
});
const field = jasmine.createSpyObj('FormFieldModel', ['validate']);
form.validateField(field);
expect(prevented).toBeTruthy();
expect(field.validate).not.toHaveBeenCalled();
expect(form.validateForm).not.toHaveBeenCalled();
});
});

89
ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts
View File

@@ -17,7 +17,7 @@
/* tslint:disable:component-selector */
import { FormFieldEvent } from './../../../events/index';
import { FormFieldEvent, ValidateFormEvent, ValidateFormFieldEvent } from './../../../events/index';
import { FormService } from './../../../services/form.service';
import { ContainerModel } from './container.model';
import { FormFieldTemplates } from './form-field-templates';
@@ -28,6 +28,20 @@ import { FormValues } from './form-values';
import { FormWidgetModel, FormWidgetModelCache } from './form-widget.model';
import { TabModel } from './tab.model';
import {
DateFieldValidator,
FormFieldValidator,
MaxDateFieldValidator,
MaxLengthFieldValidator,
MaxValueFieldValidator,
MinDateFieldValidator,
MinLengthFieldValidator,
MinValueFieldValidator,
NumberFieldValidator,
RegExFieldValidator,
RequiredFieldValidator
} from './form-field-validator';
export class FormModel {
static UNSET_TASK_NAME: string = 'Nameless task';
@@ -53,6 +67,7 @@ export class FormModel {
fields: FormWidgetModel[] = [];
outcomes: FormOutcomeModel[] = [];
customFieldTemplates: FormFieldTemplates = {};
fieldValidators: FormFieldValidator[] = [];
readonly selectedOutcome: string;
values: FormValues = {};
@@ -121,6 +136,20 @@ export class FormModel {
);
}
}
this.fieldValidators = [
new RequiredFieldValidator(),
new NumberFieldValidator(),
new MinLengthFieldValidator(),
new MaxLengthFieldValidator(),
new MinValueFieldValidator(),
new MaxValueFieldValidator(),
new RegExFieldValidator(),
new DateFieldValidator(),
new MinDateFieldValidator(),
new MaxDateFieldValidator()
];
this.validateForm();
}
@@ -148,21 +177,63 @@ export class FormModel {
return result;
}
private validateForm() {
this._isValid = true;
let fields = this.getFormFields();
for (let i = 0; i < fields.length; i++) {
if (!fields[i].validate()) {
this._isValid = false;
return;
/**
* Validates entire form and all form fields.
*
* @returns {void}
* @memberof FormModel
*/
validateForm(): void {
const validateFormEvent = new ValidateFormEvent(this);
if (this.formService) {
this.formService.validateForm.next(validateFormEvent);
}
this._isValid = validateFormEvent.isValid;
if (validateFormEvent.defaultPrevented) {
return;
}
if (validateFormEvent.isValid) {
let fields = this.getFormFields();
for (let i = 0; i < fields.length; i++) {
if (!fields[i].validate()) {
this._isValid = false;
return;
}
}
}
}
private validateField(field: FormFieldModel) {
/**
* Validates a specific form field, triggers form validation.
*
* @param {FormFieldModel} field Form field to validate.
* @returns {void}
* @memberof FormModel
*/
validateField(field: FormFieldModel): void {
if (!field) {
return;
}
const validateFieldEvent = new ValidateFormFieldEvent(this, field);
if (this.formService) {
this.formService.validateFormField.next(validateFieldEvent);
}
if (!validateFieldEvent.isValid) {
this._isValid = false;
return;
}
if (validateFieldEvent.defaultPrevented) {
return;
}
if (!field.validate()) {
this._isValid = false;
return;

10
ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts
View File

@@ -131,7 +131,7 @@ describe('DateWidgetComponent', () => {
});
it('should update picker value on input date changed', () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(new FormModel(), {
type: 'date',
value: '13-03-1982'
});
@@ -145,7 +145,7 @@ describe('DateWidgetComponent', () => {
it('should update field value on date selected', () => {
widget.elementRef = new ElementRef(nativeElement);
widget.field = new FormFieldModel(null, {type: 'date'});
widget.field = new FormFieldModel(new FormModel(), {type: 'date'});
widget.ngOnInit();
let date = '13-3-1982';
@@ -157,7 +157,7 @@ describe('DateWidgetComponent', () => {
it('should update material textfield on date selected', () => {
spyOn(widget, 'setupMaterialTextField').and.callThrough();
widget.field = new FormFieldModel(null, {type: 'date'});
widget.field = new FormFieldModel(new FormModel(), {type: 'date'});
widget.ngOnInit();
widget.datePicker.time = moment();
@@ -169,7 +169,7 @@ describe('DateWidgetComponent', () => {
widget.elementRef = undefined;
spyOn(widget, 'setupMaterialTextField').and.callThrough();
widget.field = new FormFieldModel(null, {type: 'date'});
widget.field = new FormFieldModel(new FormModel(), {type: 'date'});
widget.ngOnInit();
widget.datePicker.time = moment();
@@ -179,7 +179,7 @@ describe('DateWidgetComponent', () => {
it('should send field change event when a new date is picked from data picker', (done) => {
spyOn(widget, 'setupMaterialTextField').and.callThrough();
widget.field = new FormFieldModel(null, {value: '9-9-9999', type: 'date'});
widget.field = new FormFieldModel(new FormModel(), {value: '9-9-9999', type: 'date'});
widget.ngOnInit();
widget.datePicker.time = moment('9-9-9999', widget.field.dateDisplayFormat);
widget.fieldChanged.subscribe((field) => {

2
ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.spec.ts
View File

@@ -203,7 +203,7 @@ describe('RadioButtonsWidgetComponent', () => {
it('should evaluate visibility on option click', async(() => {
spyOn(stubVisibilityService, 'evaluateVisibility').and.returnValue(false);
let option: HTMLElement = <HTMLElement>element.querySelector('#opt-1');
let option: HTMLElement = <HTMLElement> element.querySelector('#opt-1');
expect(element.querySelector('#radio-id')).not.toBeNull();
expect(option).not.toBeNull();
option.click();

16
ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts
View File

@@ -76,7 +76,7 @@ describe('TextWidgetComponent', () => {
});
fixture.detectChanges();
inputElement = <HTMLInputElement>element.querySelector('#text-id');
inputElement = <HTMLInputElement> element.querySelector('#text-id');
});
it('should raise ngModelChange event', async(() => {
@@ -118,7 +118,7 @@ describe('TextWidgetComponent', () => {
});
fixture.detectChanges();
inputElement = <HTMLInputElement>element.querySelector('#text-id');
inputElement = <HTMLInputElement> element.querySelector('#text-id');
});
it('should show text widget', () => {
@@ -138,7 +138,7 @@ describe('TextWidgetComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
inputElement = <HTMLInputElement>element.querySelector('#text-id');
inputElement = <HTMLInputElement> element.querySelector('#text-id');
expect(inputElement.value).toBe('');
});
}));
@@ -153,7 +153,7 @@ describe('TextWidgetComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
inputElement = <HTMLInputElement>element.querySelector('#text-id');
inputElement = <HTMLInputElement> element.querySelector('#text-id');
expect(inputElement.value).toBe('');
});
}));
@@ -169,7 +169,7 @@ describe('TextWidgetComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
let textEle: HTMLInputElement = <HTMLInputElement>element.querySelector('#text-id');
let textEle: HTMLInputElement = <HTMLInputElement> element.querySelector('#text-id');
expect(textEle.value).toBe('1');
});
}));
@@ -185,7 +185,7 @@ describe('TextWidgetComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
let textEle: HTMLInputElement = <HTMLInputElement>element.querySelector('#text-id');
let textEle: HTMLInputElement = <HTMLInputElement> element.querySelector('#text-id');
expect(textEle.value).toBe('12-345,67%');
});
}));
@@ -206,7 +206,7 @@ describe('TextWidgetComponent', () => {
});
fixture.detectChanges();
inputElement = <HTMLInputElement>element.querySelector('#text-id');
inputElement = <HTMLInputElement> element.querySelector('#text-id');
});
afterEach(() => {
@@ -225,7 +225,7 @@ describe('TextWidgetComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
let textEle: HTMLInputElement = <HTMLInputElement>element.querySelector('#text-id');
let textEle: HTMLInputElement = <HTMLInputElement> element.querySelector('#text-id');
expect(textEle.value).toBe('12,34%');
});
}));

8
ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.spec.ts
View File

@@ -73,7 +73,7 @@ describe('UploadWidgetComponent', () => {
});
it('should reset field value', () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.UPLOAD,
value: [
{ name: 'filename' }
@@ -125,7 +125,7 @@ describe('UploadWidgetComponent', () => {
it('should be disabled on readonly forms', async(() => {
uploadWidgetComponent.field.form.readOnly = true;
fixture.detectChanges();
inputElement = <HTMLInputElement>element.querySelector('#upload-id');
inputElement = <HTMLInputElement> element.querySelector('#upload-id');
fixture.whenStable().then(() => {
fixture.detectChanges();
@@ -138,7 +138,7 @@ describe('UploadWidgetComponent', () => {
it('should have the multiple attribute when is selected in parameters', async(() => {
uploadWidgetComponent.field.params.multiple = true;
fixture.detectChanges();
inputElement = <HTMLInputElement>element.querySelector('#upload-id');
inputElement = <HTMLInputElement> element.querySelector('#upload-id');
fixture.whenStable().then(() => {
fixture.detectChanges();
@@ -151,7 +151,7 @@ describe('UploadWidgetComponent', () => {
it('should not have the multiple attribute if multiple is false', async(() => {
uploadWidgetComponent.field.params.multiple = false;
fixture.detectChanges();
inputElement = <HTMLInputElement>element.querySelector('#upload-id');
inputElement = <HTMLInputElement> element.querySelector('#upload-id');
fixture.whenStable().then(() => {
fixture.detectChanges();