[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:
Eugenio Romano
2018-09-18 17:40:00 +01:00
committed by GitHub
parent ec633f27d6
commit 219e093d66
20 changed files with 237 additions and 238 deletions

View File

@@ -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>

View File

@@ -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);

View File

@@ -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();
}

View File

@@ -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>