@formio/js 5.0.0-rc.26 → 5.0.0-rc.28

package/lib/cjs/components/datamap/DataMap.js

@@ -8,6 +8,7 @@ const DataGrid_1 = __importDefault(require("../datagrid/DataGrid"));
 const lodash_1 = __importDefault(require("lodash"));
 const eventemitter3_1 = __importDefault(require("eventemitter3"));
 const utils_1 = require("../../utils/utils");
+const Components_1 = require("../Components");
 class DataMapComponent extends DataGrid_1.default {
     static schema(...extend) {
         return Component_1.default.schema({
@@ -240,7 +241,7 @@ class DataMapComponent extends DataGrid_1.default {
             delete dataValue[key];
             const comp = components[this.valueKey];
             comp.component.key = newKey;
-            comp.path = this.calculateComponentPath(comp);
+            comp.path = Components_1.Components.calculateComponentPath(comp);
             key = newKey;
         });
         const valueComponent = lodash_1.default.clone(this.component.valueComponent);

package/lib/cjs/components/datetime/DateTime.js

@@ -104,8 +104,6 @@ class DateTimeComponent extends Input_1.default {
         /* eslint-disable camelcase */
         this.component.widget = Object.assign({ type: 'calendar', timezone, displayInTimezone: lodash_1.default.get(this.component, 'displayInTimezone', 'viewer'), locale: this.options.language, useLocaleSettings: lodash_1.default.get(this.component, 'useLocaleSettings', false), allowInput: lodash_1.default.get(this.component, 'allowInput', true), mode: 'single', enableTime: lodash_1.default.get(this.component, 'enableTime', true), noCalendar: !lodash_1.default.get(this.component, 'enableDate', true), format: this.component.format, hourIncrement: lodash_1.default.get(this.component, 'timePicker.hourStep', 1), minuteIncrement: lodash_1.default.get(this.component, 'timePicker.minuteStep', 5), time_24hr: time24hr, readOnly: this.options.readOnly, minDate: lodash_1.default.get(this.component, 'datePicker.minDate'), disabledDates: lodash_1.default.get(this.component, 'datePicker.disable'), disableWeekends: lodash_1.default.get(this.component, 'datePicker.disableWeekends'), disableWeekdays: lodash_1.default.get(this.component, 'datePicker.disableWeekdays'), disableFunction: lodash_1.default.get(this.component, 'datePicker.disableFunction'), maxDate: lodash_1.default.get(this.component, 'datePicker.maxDate') }, customOptions);
         /* eslint-enable camelcase */
-        // Add the validators date.
-        this.validators.push('date');
     }
     get defaultSchema() {
         return DateTimeComponent.schema();

package/lib/cjs/components/day/Day.js

@@ -51,10 +51,10 @@ class DayComponent extends Field_1.default {
         return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];
     }
     constructor(component, options, data) {
-        if (component.maxDate) {
+        if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
             component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();
         }
-        if (component.minDate) {
+        if (component.minDate && component.minDate.indexOf('moment(') === -1) {
             component.minDate = (0, moment_1.default)(component.minDate, 'YYYY-MM-DD').toISOString();
         }
         super(component, options, data);
@@ -211,7 +211,6 @@ class DayComponent extends Field_1.default {
     }
     init() {
         super.init();
-        this.validators = this.validators.concat(['day', 'maxDate', 'minDate', 'minYear', 'maxYear']);
         const minYear = this.component.fields.year.minYear;
         const maxYear = this.component.fields.year.maxYear;
         this.component.maxYear = maxYear;

package/lib/cjs/components/editgrid/EditGrid.d.ts

@@ -83,12 +83,16 @@ export default class EditGridComponent extends NestedArrayComponent {
     removeRow(rowIndex: any, modified: any): void;
     createRowComponents(row: any, rowIndex: any, recreatePartially: any): any;
     hasOpenRows(): any;
+    getAttachedData(data?: null): any;
     shouldValidateDraft(editRow: any): any;
     shouldValidateRow(editRow: any, dirty: any): any;
-    validateRow(editRow: any, dirty: any, forceSilentCheck: any): boolean;
-    showRowErrorAlerts(editRow: any, valid: any): void;
-    checkValidity(data: any, dirty: any, row: any, silentCheck: any): boolean;
-    checkComponentValidity(data: any, dirty: any, row: any, options?: {}): boolean;
+    validateRow(editRow: any, dirty: any, forceSilentCheck: any): any;
+    showRowErrorAlerts(editRow: any, errors: any): void;
+    /**
+     * Return that this component processes its own validation.
+     */
+    get processOwnValidation(): boolean;
+    setRowInvalid(ref: any, index: any): void;
     changeState(changed: any, flags: any): void;
     openWhenEmpty(): void;
     restoreRowContext(editRow: any, flags?: {}): void;

package/lib/cjs/components/editgrid/EditGrid.js

@@ -4,11 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
+const core_1 = require("@formio/core");
+const components_1 = require("@formio/bootstrap/components");
 const NestedArrayComponent_1 = __importDefault(require("../_classes/nestedarray/NestedArrayComponent"));
 const Component_1 = __importDefault(require("../_classes/component/Component"));
 const Alert_1 = __importDefault(require("../alert/Alert"));
 const utils_1 = require("../../utils/utils");
-const components_1 = require("@formio/bootstrap/components");
 const EditRowState = {
     New: 'new',
     Editing: 'editing',
@@ -87,7 +88,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
       {% if (!instance.options.readOnly && !instance.disabled) { %}
         <div class="col-sm-2">
           <div class="btn-group pull-right">
-            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
+            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('pen-fill') }}"></i></button>
             {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
               <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
             {% } %}
@@ -108,7 +109,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         {% if (!instance.options.readOnly && !instance.disabled) { %}
           <td class="editgrid-table-column">
             <div class="btn-group">
-              <button class="btn btn-default btn-light btn-sm editRow" aria-label="{{ t('Edit row') }}"><i class="{{ iconClass('edit') }}"></i></button>
+              <button class="btn btn-default btn-light btn-sm editRow" aria-label="{{ t('Edit row') }}"><i class="{{ iconClass('pen-fill') }}"></i></button>
               {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
               <button class="btn btn-danger btn-sm removeRow" aria-label="{{ t('Remove row') }}"><i class="{{ iconClass('trash') }}"></i></button>
               {% } %}
@@ -440,11 +441,10 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                             this.editRow(rowIndex).then(() => {
                                 var _a;
                                 if (this.component.rowDrafts) {
-                                    this.validateRow(editRow, false);
-                                    const hasErrors = editRow.errors && !!editRow.errors.length;
-                                    const shouldShowRowErrorsAlert = this.component.modal && hasErrors && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted);
+                                    const errors = this.validateRow(editRow, false);
+                                    const shouldShowRowErrorsAlert = this.component.modal && errors.length && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted);
                                     if (shouldShowRowErrorsAlert) {
-                                        this.alert.showErrors(editRow.errors, false);
+                                        this.alert.showErrors(errors, false);
                                         editRow.alerts = true;
                                     }
                                 }
@@ -615,7 +615,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             component: this.component,
             row: editRow,
         });
-        this.checkRow('checkData', null, {}, editRow.data, editRow.components);
+        this.processRow('checkData', null, {}, editRow.data, editRow.components);
         if (this.component.modal) {
             this.addRowModal(rowIndex);
         }
@@ -662,13 +662,14 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 if (!this.component.rowDrafts) {
                     editRow.components.forEach((comp) => comp.setPristine(false));
                 }
-                if (this.validateRow(editRow, true) || this.component.rowDrafts) {
+                const errors = this.validateRow(editRow, true);
+                if (!errors.length || this.component.rowDrafts) {
                     editRow.willBeSaved = true;
                     dialog.close();
                     this.saveRow(rowIndex, true);
                 }
                 else {
-                    this.alert.showErrors(editRow.errors, false);
+                    this.alert.showErrors(errors, false);
                     editRow.alerts = true;
                 }
             },
@@ -794,9 +795,9 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         if (!this.component.rowDrafts) {
             editRow.components.forEach((comp) => comp.setPristine(false));
         }
-        const isRowValid = this.validateRow(editRow, true);
+        const errors = this.validateRow(editRow, true);
         if (!this.component.rowDrafts) {
-            if (!isRowValid) {
+            if (errors.length) {
                 return false;
             }
         }
@@ -822,7 +823,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 }
             }
         }
-        editRow.state = this.component.rowDrafts && !isRowValid ? EditRowState.Draft : EditRowState.Saved;
+        editRow.state = this.component.rowDrafts && errors.length ? EditRowState.Draft : EditRowState.Saved;
         editRow.backup = null;
         this.updateValue();
         this.emit('editGridSaveRow', {
@@ -931,15 +932,9 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                     return;
                 }
                 const editRow = this.editRows[rowIndex];
-                if (editRow === null || editRow === void 0 ? void 0 : editRow.alerts) {
-                    this.checkData(null, Object.assign(Object.assign({}, flags), { changed,
-                        rowIndex }), this.data);
-                }
-                else if (editRow) {
-                    // If drafts allowed, perform validation silently if there was no attempt to submit a form
-                    const silentCheck = this.component.rowDrafts && !this.shouldValidateDraft(editRow);
-                    this.checkRow('checkData', null, Object.assign(Object.assign({}, flags), { changed,
-                        silentCheck }), editRow.data, editRow.components, silentCheck);
+                if (editRow) {
+                    this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), editRow.data, editRow.components);
+                    this.validateRow(editRow, false);
                 }
                 if (this.variableTypeComponentsIndexes.length) {
                     this.checkRowVariableTypeComponents(editRow, rowIndex);
@@ -955,6 +950,11 @@ class EditGridComponent extends NestedArrayComponent_1.default {
     hasOpenRows() {
         return this.editRows.some(row => this.isOpen(row));
     }
+    getAttachedData(data = null) {
+        const ourData = (0, utils_1.fastCloneDeep)(data || this._data || this.rootValue);
+        lodash_1.default.set(ourData, this.key, this.editRows.map((row) => row.data));
+        return ourData;
+    }
     shouldValidateDraft(editRow) {
         var _a, _b;
         // Draft rows should be validated only when there was an attempt to submit a form
@@ -966,48 +966,65 @@ class EditGridComponent extends NestedArrayComponent_1.default {
     }
     shouldValidateRow(editRow, dirty) {
         return this.shouldValidateDraft(editRow) ||
+            editRow.state === EditRowState.New ||
             editRow.state === EditRowState.Editing ||
             editRow.alerts ||
             dirty;
     }
     validateRow(editRow, dirty, forceSilentCheck) {
         var _a;
-        let valid = true;
-        const errorsSnapshot = [...this.errors];
+        editRow.errors = [];
         if (this.shouldValidateRow(editRow, dirty)) {
-            editRow.components.forEach(comp => {
-                const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;
-                valid &= comp.checkValidity(null, dirty, null, silentCheck);
-            });
+            const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;
+            const rootValue = (0, utils_1.fastCloneDeep)(this.rootValue);
+            const editGridValue = lodash_1.default.get(rootValue, this.path, []);
+            editGridValue[editRow.rowIndex] = editRow.data;
+            lodash_1.default.set(rootValue, this.path, editGridValue);
+            editRow.errors = (0, core_1.processSync)({
+                components: (0, utils_1.fastCloneDeep)(this.component.components).map((component) => {
+                    component.parentPath = `${this.path}[${editRow.rowIndex}]`;
+                    return component;
+                }),
+                data: rootValue,
+                row: editRow.data,
+                process: 'validateRow',
+                instances: this.componentsMap,
+                scope: { errors: [] },
+                processors: [
+                    (context) => this.validationProcessor(context, { dirty, silentCheck })
+                ]
+            }).errors;
         }
+        // TODO: this is essentially running its own custom validation and should be moved into a validation rule
         if (this.component.validate && this.component.validate.row) {
-            valid = this.evaluate(this.component.validate.row, {
-                valid,
+            const valid = this.evaluate(this.component.validate.row, {
+                valid: (editRow.length === 0),
                 row: editRow.data
             }, 'valid', true);
             if (valid.toString() !== 'true') {
-                editRow.error = valid;
-                valid = false;
-            }
-            else {
-                editRow.error = null;
+                editRow.errors.push({
+                    type: 'error',
+                    rowError: true,
+                    message: valid.toString()
+                });
             }
             if (valid === null) {
-                valid = `Invalid row validation for ${this.key}`;
+                editRow.errors.push({
+                    type: 'error',
+                    message: `Invalid row validation for ${this.key}`
+                });
             }
         }
-        editRow.errors = !valid ? this.errors.filter((err) => !errorsSnapshot.includes(err)) : null;
         if (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted)) {
-            this.showRowErrorAlerts(editRow, !!valid);
+            this.showRowErrorAlerts(editRow, editRow.errors);
         }
-        return !!valid;
+        return editRow.errors;
     }
-    showRowErrorAlerts(editRow, valid) {
-        var _a;
+    showRowErrorAlerts(editRow, errors) {
         if (editRow.alerts) {
             if (this.alert) {
-                if (((_a = editRow.errors) === null || _a === void 0 ? void 0 : _a.length) && !valid) {
-                    this.alert.showErrors(editRow.errors, false);
+                if (errors.length) {
+                    this.alert.showErrors(errors, false);
                     editRow.alerts = true;
                 }
                 else {
@@ -1016,40 +1033,35 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             }
         }
     }
-    checkValidity(data, dirty, row, silentCheck) {
-        data = data || this.rootValue;
-        row = row || this.data;
-        if (!this.checkCondition(row, data)) {
-            this.setCustomValidity('');
-            return true;
-        }
-        return this.checkComponentValidity(data, dirty, row, { silentCheck });
+    /**
+     * Return that this component processes its own validation.
+     */
+    get processOwnValidation() {
+        return true;
     }
-    checkComponentValidity(data, dirty, row, options = {}) {
-        var _a, _b, _c;
+    checkComponentValidity(data, dirty, row, options = {}, errors = []) {
+        var _a, _b;
         const { silentCheck } = options;
-        const errorsLength = this.errors.length;
-        const superValid = super.checkComponentValidity(data, dirty, row, options);
+        const superValid = super.checkComponentValidity(data, dirty, row, options, errors);
         // If super tells us that component invalid and there is no need to update alerts, just return false
         if (!superValid && (!this.alert && !this.hasOpenRows())) {
             return false;
         }
-        if (this.shouldSkipValidation(data, dirty, row)) {
-            return true;
-        }
-        let rowsValid = true;
         let rowsEditing = false;
+        const allRowErrors = [];
         this.editRows.forEach((editRow, index) => {
             // Trigger all errors on the row.
-            const rowValid = this.validateRow(editRow, dirty, silentCheck);
-            rowsValid &= rowValid;
+            const rowErrors = this.validateRow(editRow, dirty, silentCheck);
+            errors.push(...rowErrors);
+            allRowErrors.push(...rowErrors);
             if (this.rowRefs) {
                 const rowContainer = this.rowRefs[index];
                 if (rowContainer) {
                     const errorContainer = rowContainer.querySelector('.editgrid-row-error');
-                    if (!rowValid && errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {
+                    if (rowErrors.length && errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {
+                        const rowError = rowErrors.find(error => error.rowError);
                         this.addClass(errorContainer, 'help-block');
-                        errorContainer.textContent = this.t(this.errorMessage('invalidRowError'));
+                        errorContainer.textContent = this.t(rowError ? rowError.message : this.errorMessage('invalidRowError'));
                     }
                     else if (errorContainer) {
                         errorContainer.textContent = '';
@@ -1059,10 +1071,9 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             // If this is a dirty check, and any rows are still editing, we need to throw validation error.
             rowsEditing |= (dirty && this.isOpen(editRow));
         });
-        if (!rowsValid) {
-            if (!silentCheck && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {
+        if (allRowErrors.length) {
+            if (!silentCheck && (dirty || this.dirty) && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {
                 this.setCustomValidity(this.t(this.errorMessage('invalidRowsError')), dirty);
-                // Delete this class, because otherwise all the components inside EditGrid will has red border even if they are valid
                 this.removeClass(this.element, 'has-error');
             }
             return false;
@@ -1072,15 +1083,28 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             return false;
         }
         const message = this.invalid || this.invalidMessage(data, dirty);
-        if (((_b = this.errors) === null || _b === void 0 ? void 0 : _b.length) !== errorsLength && ((_c = this.root) === null || _c === void 0 ? void 0 : _c.submitted) && !message) {
-            this.setCustomValidity(message, dirty);
-            this.root.showErrors();
+        if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {
+            this._errors = this.setCustomValidity(message, dirty);
+            errors.push(...this._errors);
+            this.root.showErrors([message]);
         }
         else {
-            this.setCustomValidity(message, dirty);
+            this._errors = this.setCustomValidity(message, dirty);
+            errors.push(...this._errors);
         }
         return superValid;
     }
+    setRowInvalid(ref, index) {
+        const editRow = this.editRows[index];
+        const errorContainer = ref.querySelector('.editgrid-row-error');
+        if (errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {
+            this.addClass(errorContainer, 'help-block');
+            errorContainer.textContent = this.t(this.errorMessage('invalidRowError'));
+        }
+        else if (errorContainer) {
+            errorContainer.textContent = '';
+        }
+    }
     changeState(changed, flags) {
         if (changed || (flags.resetValue && this.component.modalEdit)) {
             this.rebuild();
@@ -1102,7 +1126,6 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             }
         }
         const changed = this.hasChanged(value, this.dataValue);
-        flags.noValidate = !changed;
         if (this.parent) {
             this.parent.checkComponentConditions();
         }
@@ -1115,7 +1138,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 this.restoreRowContext(editRow, flags);
                 editRow.state = EditRowState.Saved;
                 editRow.backup = null;
-                editRow.error = null;
+                editRow.errors = [];
             }
             else {
                 this.editRows[rowIndex] = {
@@ -1123,7 +1146,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                     data: row,
                     state: EditRowState.Saved,
                     backup: null,
-                    error: null,
+                    errors: [],
                 };
             }
         });

package/lib/cjs/components/email/Email.js

@@ -28,7 +28,6 @@ class EmailComponent extends TextField_1.default {
     }
     init() {
         super.init();
-        this.validators.push('email');
     }
     get defaultSchema() {
         return EmailComponent.schema();

package/lib/cjs/components/file/File.js

@@ -283,7 +283,7 @@ class FileComponent extends Field_1.default {
     }
     deleteFile(fileInfo) {
         const { options = {} } = this.component;
-        if (fileInfo && (['url', 'indexeddb', 's3', 'googledrive', 'azure'].includes(this.component.storage))) {
+        if (fileInfo && (['url', 'indexeddb'].includes(this.component.storage))) {
             const { fileService } = this;
             if (fileService && typeof fileService.deleteFile === 'function') {
                 fileService.deleteFile(fileInfo, options);

package/lib/cjs/components/file/fixtures/comp3.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: ({
+        label: string;
+        tableView: boolean;
+        storage: string;
+        webcam: boolean;
+        fileTypes: {
+            label: string;
+            value: string;
+        }[];
+        key: string;
+        type: string;
+        input: boolean;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        storage?: undefined;
+        webcam?: undefined;
+        fileTypes?: undefined;
+    })[];
+}
+export default _default;

package/lib/cjs/components/file/fixtures/comp3.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Upload',
+            tableView: false,
+            storage: 'base64',
+            webcam: false,
+            fileTypes: [
+                {
+                    label: '',
+                    value: ''
+                }
+            ],
+            key: 'file',
+            type: 'file',
+            input: true
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+};

package/lib/cjs/components/form/Form.d.ts

@@ -25,10 +25,6 @@ export default class FormComponent extends Component {
     getSubOptions(options?: {}): {};
     render(): any;
     asString(value: any): any;
-    /**
-     * Prints out the value of form components as a datagrid value.
-     */
-    getValueAsString(value: any): any;
     attach(element: any): Promise<any>;
     get hasLoadedForm(): any;
     get isRevisionChanged(): any;
@@ -54,7 +50,7 @@ export default class FormComponent extends Component {
     loadSubForm(fromAttach: any): any;
     subFormLoading: boolean | undefined;
     get subFormData(): any;
-    checkComponentValidity(data: any, dirty: any, row: any, options: any): any;
+    checkComponentValidity(data: any, dirty: any, row: any, options: any, errors?: any[]): any;
     checkComponentConditions(data: any, flags: any, row: any): any;
     calculateValue(data: any, flags: any, row: any): any;
     setPristine(pristine: any): void;
@@ -74,7 +70,7 @@ export default class FormComponent extends Component {
      *
      * @return {*}
      */
-    submitSubForm(rejectOnError: any): any;
+    submitSubForm(): any;
     /**
      * Submit the form before the next page is triggered.
      */

package/lib/cjs/components/form/Form.js

@@ -143,7 +143,6 @@ class FormComponent extends Component_1.default {
         }
     }
     getSubOptions(options = {}) {
-        options.parentPath = `${this.path}.data.`;
         options.events = this.createEmitter();
         // Make sure to not show the submit button in wizards in the nested forms.
         lodash_1.default.set(options, 'buttonSettings.showSubmit', false);
@@ -192,6 +191,12 @@ class FormComponent extends Component_1.default {
         if (this.options.onChange) {
             options.onChange = this.options.onChange;
         }
+        if (this.options.preview) {
+            options.preview = this.options.preview;
+        }
+        if (this.options.inEditGrid) {
+            options.inEditGrid = this.options.inEditGrid;
+        }
         return options;
     }
     render() {
@@ -207,7 +212,7 @@ class FormComponent extends Component_1.default {
     /**
      * Prints out the value of form components as a datagrid value.
      */
-    getValueAsString(value) {
+    getValueAsString(value, options) {
         if (!value) {
             return 'No data provided';
         }
@@ -217,6 +222,30 @@ class FormComponent extends Component_1.default {
         if (!value.data || !Object.keys(value.data).length) {
             return 'No data provided';
         }
+        if (options === null || options === void 0 ? void 0 : options.email) {
+            let result = (`
+        <table border="1" style="width:100%">
+          <tbody>
+      `);
+            this.everyComponent((component) => {
+                if (component.isInputComponent && component.visible && !component.skipInEmail) {
+                    result += (`
+            <tr>
+              <th style="padding: 5px 10px;">${component.label}</th>
+              <td style="width:100%;padding:5px 10px;">${component.getView(component.dataValue, options)}</td>
+            </tr>
+          `);
+                }
+            }, Object.assign(Object.assign({}, options), { fromRoot: true }));
+            result += (`
+          </tbody>
+        </table>
+      `);
+            return result;
+        }
+        if (lodash_1.default.isEmpty(value)) {
+            return '';
+        }
         return '[Complex Data]';
     }
     attach(element) {
@@ -389,11 +418,12 @@ class FormComponent extends Component_1.default {
      * Load the subform.
      */
     loadSubForm(fromAttach) {
+        var _a;
         if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
-            !(this.options.pdf && this.useOriginalRevision && lodash_1.default.isNull(this.subForm) && !this.subFormLoading)) {
+            !(this.options.pdf && ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && lodash_1.default.isNull(this.subForm) && !this.subFormLoading)) {
             // Pass config down to sub forms.
             if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {
                 this.formObj.config = this.root.form.config;
@@ -405,6 +435,9 @@ class FormComponent extends Component_1.default {
             return (new Formio_1.Formio(this.formSrc)).loadForm({ params: { live: 1 } })
                 .then((formObj) => {
                 this.formObj = formObj;
+                if (this.options.pdf && this.component.useOriginalRevision) {
+                    this.formObj.display = 'form';
+                }
                 this.subFormLoading = false;
                 return formObj;
             })
@@ -419,13 +452,13 @@ class FormComponent extends Component_1.default {
         var _a;
         return ((_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.data) || {};
     }
-    checkComponentValidity(data, dirty, row, options) {
+    checkComponentValidity(data, dirty, row, options, errors = []) {
         options = options || {};
         const silentCheck = options.silentCheck || false;
         if (this.subForm) {
-            return this.subForm.checkValidity(this.subFormData, dirty, null, silentCheck);
+            return this.subForm.checkValidity(this.subFormData, dirty, null, silentCheck, errors);
         }
-        return super.checkComponentValidity(data, dirty, row, options);
+        return super.checkComponentValidity(data, dirty, row, options, errors);
     }
     checkComponentConditions(data, flags, row) {
         const visible = super.checkComponentConditions(data, flags, row);
@@ -484,7 +517,7 @@ class FormComponent extends Component_1.default {
      *
      * @return {*}
      */
-    submitSubForm(rejectOnError) {
+    submitSubForm() {
         // If we wish to submit the form on next page, then do that here.
         if (this.shouldSubmit) {
             return this.subFormReady.then(() => {
@@ -492,6 +525,7 @@ class FormComponent extends Component_1.default {
                     return this.dataValue;
                 }
                 this.subForm.nosubmit = false;
+                this.subForm.submitted = true;
                 return this.subForm.submitForm().then(result => {
                     this.subForm.loading = false;
                     this.subForm.showAllErrors = false;
@@ -499,13 +533,8 @@ class FormComponent extends Component_1.default {
                     return this.dataValue;
                 }).catch(err => {
                     this.subForm.showAllErrors = true;
-                    if (rejectOnError) {
-                        this.subForm.onSubmissionError(err);
-                        return Promise.reject(err);
-                    }
-                    else {
-                        return {};
-                    }
+                    this.subForm.onSubmissionError(err);
+                    return Promise.reject(err);
                 });
             });
         }