mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-584] [ADF-3561] Validation error summary for error component (#3795)
* emit Forms error * add demo * add documentation remove old form tag deprecated in 1.x fix translation outcome * remove prevent default validation * fix lint
This commit is contained in:
@@ -13,7 +13,7 @@
|
||||
|
||||
<section class="grid-list" *ngIf="content?.isExpanded">
|
||||
<div class="grid-list-item" *ngFor="let field of fields" [style.width]="getColumnWith(field)">
|
||||
<form-field *ngIf="field" [field]="field"></form-field>
|
||||
<adf-form-field *ngIf="field" [field]="field"></adf-form-field>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
@@ -271,27 +271,6 @@ describe('FormModel', () => {
|
||||
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);
|
||||
|
||||
|
@@ -15,9 +15,11 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* tslint:disable:component-selector */
|
||||
/* tslint:disable:component-selector */
|
||||
|
||||
import { FormFieldEvent, ValidateFormEvent, ValidateFormFieldEvent } from './../../../events/index';
|
||||
import { FormFieldEvent } from './../../../events/form-field.event';
|
||||
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 { FormFieldTemplates } from './form-field-templates';
|
||||
@@ -120,9 +122,21 @@ export class FormModel {
|
||||
}
|
||||
|
||||
if (json.fields) {
|
||||
let saveOutcome = new FormOutcomeModel(this, { id: FormModel.SAVE_OUTCOME, name: 'Save', isSystem: true });
|
||||
let completeOutcome = new FormOutcomeModel(this, { id: FormModel.COMPLETE_OUTCOME, name: 'Complete', isSystem: true });
|
||||
let startProcessOutcome = new FormOutcomeModel(this, { id: FormModel.START_PROCESS_OUTCOME, name: 'Start Process', isSystem: true });
|
||||
let saveOutcome = new FormOutcomeModel(this, {
|
||||
id: FormModel.SAVE_OUTCOME,
|
||||
name: 'Save',
|
||||
isSystem: true
|
||||
});
|
||||
let completeOutcome = new FormOutcomeModel(this, {
|
||||
id: FormModel.COMPLETE_OUTCOME,
|
||||
name: 'Complete',
|
||||
isSystem: true
|
||||
});
|
||||
let startProcessOutcome = new FormOutcomeModel(this, {
|
||||
id: FormModel.START_PROCESS_OUTCOME,
|
||||
name: 'Start Process',
|
||||
isSystem: true
|
||||
});
|
||||
|
||||
let customOutcomes = (json.outcomes || []).map(obj => new FormOutcomeModel(this, obj));
|
||||
|
||||
@@ -176,27 +190,27 @@ export class FormModel {
|
||||
* @memberof FormModel
|
||||
*/
|
||||
validateForm(): void {
|
||||
const validateFormEvent = new ValidateFormEvent(this);
|
||||
const validateFormEvent: any = new ValidateFormEvent(this);
|
||||
|
||||
let errorsField: FormFieldModel[] = [];
|
||||
|
||||
let fields = this.getFormFields();
|
||||
for (let i = 0; i < fields.length; i++) {
|
||||
if (!fields[i].validate()) {
|
||||
errorsField.push(fields[i]);
|
||||
}
|
||||
}
|
||||
|
||||
if (errorsField.length > 0) {
|
||||
this._isValid = false;
|
||||
}
|
||||
|
||||
if (this.formService) {
|
||||
validateFormEvent.isValid = this._isValid;
|
||||
validateFormEvent.errorsField = errorsField;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -227,8 +241,8 @@ export class FormModel {
|
||||
|
||||
if (!field.validate()) {
|
||||
this._isValid = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.validateForm();
|
||||
}
|
||||
|
||||
|
@@ -2,7 +2,7 @@
|
||||
<mat-tab-group>
|
||||
<mat-tab *ngFor="let tab of visibleTabs" [label]="tab.title">
|
||||
<div *ngFor="let field of tab.fields">
|
||||
<form-field [field]="field.field"></form-field>
|
||||
<adf-form-field [field]="field.field"></adf-form-field>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
Reference in New Issue
Block a user