@pnp/spfx-controls-react 3.15.0-beta.4974097 → 3.15.0-beta.4974233

package/lib/controls/dynamicForm/DynamicForm.js

@@ -61,20 +61,21 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 /* eslint-disable @microsoft/spfx/no-async-await */
-import { SPHttpClient } from '@microsoft/sp-http';
-import { sp } from '@pnp/sp/presets/all';
-import * as strings from 'ControlStrings';
-import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
-import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
-import * as React from 'react';
-import SPservice from '../../services/SPService';
-import { DynamicField } from './dynamicField';
-import styles from './DynamicForm.module.scss';
-import '@pnp/sp/lists';
-import '@pnp/sp/content-types';
-import '@pnp/sp/folders';
-import '@pnp/sp/items';
+import { SPHttpClient } from "@microsoft/sp-http";
+import { sp } from "@pnp/sp/presets/all";
+import * as strings from "ControlStrings";
+import { DefaultButton, PrimaryButton, } from "office-ui-fabric-react/lib/Button";
+import { ProgressIndicator } from "office-ui-fabric-react/lib/ProgressIndicator";
+import { Stack } from "office-ui-fabric-react/lib/Stack";
+import * as React from "react";
+import SPservice from "../../services/SPService";
+import { DynamicField } from "./dynamicField";
+import styles from "./DynamicForm.module.scss";
+import { Dialog, DialogFooter, DialogType, } from "office-ui-fabric-react/lib/Dialog";
+import "@pnp/sp/lists";
+import "@pnp/sp/content-types";
+import "@pnp/sp/folders";
+import "@pnp/sp/items";
 var stackTokens = { childrenGap: 20 };
 /**
  * DynamicForm Class Control
@@ -83,32 +84,38 @@ var DynamicForm = /** @class */ (function (_super) {
     __extends(DynamicForm, _super);
     function DynamicForm(props) {
         var _this = _super.call(this, props) || this;
-        _this.webURL = _this.props.webAbsoluteUrl ? _this.props.webAbsoluteUrl : _this.props.context.pageContext.web.absoluteUrl;
+        _this.webURL = _this.props.webAbsoluteUrl
+            ? _this.props.webAbsoluteUrl
+            : _this.props.context.pageContext.web.absoluteUrl;
         //trigger when the user submits the form.
         _this.onSubmitClick = function () { return __awaiter(_this, void 0, void 0, function () {
             var _a, listId, listItemId, contentTypeId, onSubmitted, onBeforeSubmit, onSubmitError, shouldBeReturnBack_1, fields, objects, _loop_1, this_1, i, len, isCancelled, newETag, iur, error_1, iar, error_2, idField, titleField, contentTypeIdField, library, folderTitle, newFolder, fields_1, folderId, iur, error_3, error_4;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
                         _a = this.props, listId = _a.listId, listItemId = _a.listItemId, contentTypeId = _a.contentTypeId, onSubmitted = _a.onSubmitted, onBeforeSubmit = _a.onBeforeSubmit, onSubmitError = _a.onSubmitError;
-                        _b.label = 1;
+                        _c.label = 1;
                     case 1:
-                        _b.trys.push([1, 27, , 28]);
+                        _c.trys.push([1, 27, , 28]);
                         shouldBeReturnBack_1 = false;
                         fields = (this.state.fieldCollection || []).slice();
                         fields.forEach(function (val) {
                             if (val.required) {
                                 if (val.newValue === null) {
-                                    if (val.fieldDefaultValue === null || val.fieldDefaultValue === '' || val.fieldDefaultValue.length === 0) {
+                                    if (val.fieldDefaultValue === null ||
+                                        val.fieldDefaultValue === "" ||
+                                        val.fieldDefaultValue.length === 0 ||
+                                        val.fieldDefaultValue === undefined) {
                                         if (val.fieldType === "DateTime")
                                             val.fieldDefaultValue = null;
                                         else
-                                            val.fieldDefaultValue = '';
+                                            val.fieldDefaultValue = "";
                                         shouldBeReturnBack_1 = true;
                                     }
                                 }
-                                else if (val.newValue === '') {
-                                    val.fieldDefaultValue = '';
+                                else if (val.newValue === "") {
+                                    val.fieldDefaultValue = "";
                                     shouldBeReturnBack_1 = true;
                                 }
                                 else if (Array.isArray(val.newValue) && val.newValue.length === 0) {
@@ -118,17 +125,20 @@ var DynamicForm = /** @class */ (function (_super) {
                             }
                         });
                         if (shouldBeReturnBack_1) {
-                            this.setState({ fieldCollection: fields });
+                            this.setState({
+                                fieldCollection: fields,
+                                isValidationErrorDialogOpen: ((_b = this.props.validationErrorDialogProps) === null || _b === void 0 ? void 0 : _b.showDialogOnValidationError) === true,
+                            });
                             return [2 /*return*/];
                         }
                         this.setState({
-                            isSaving: true
+                            isSaving: true,
                         });
                         objects = {};
                         _loop_1 = function (i, len) {
                             var val, fieldType, additionalData, columnInternalName, hiddenFieldName, value_1, uploadedImage;
-                            return __generator(this, function (_c) {
-                                switch (_c.label) {
+                            return __generator(this, function (_d) {
+                                switch (_d.label) {
                                     case 0:
                                         val = fields[i];
                                         fieldType = val.fieldType, additionalData = val.additionalData, columnInternalName = val.columnInternalName, hiddenFieldName = val.hiddenFieldName;
@@ -148,20 +158,24 @@ var DynamicForm = /** @class */ (function (_super) {
                                         val.newValue.forEach(function (element) {
                                             value_1.push(element.key);
                                         });
-                                        objects["".concat(columnInternalName, "Id")] = { results: value_1.length === 0 ? null : value_1 };
+                                        objects["".concat(columnInternalName, "Id")] = {
+                                            results: value_1.length === 0 ? null : value_1,
+                                        };
                                         return [3 /*break*/, 14];
                                     case 2:
                                         if (!(fieldType === "TaxonomyFieldType")) return [3 /*break*/, 3];
                                         objects[columnInternalName] = {
-                                            '__metadata': { 'type': 'SP.Taxonomy.TaxonomyFieldValue' },
-                                            'Label': value_1[0].name,
-                                            'TermGuid': value_1[0].key,
-                                            'WssId': '-1'
+                                            __metadata: { type: "SP.Taxonomy.TaxonomyFieldValue" },
+                                            Label: value_1[0].name,
+                                            TermGuid: value_1[0].key,
+                                            WssId: "-1",
                                         };
                                         return [3 /*break*/, 14];
                                     case 3:
                                         if (!(fieldType === "TaxonomyFieldTypeMulti")) return [3 /*break*/, 4];
-                                        objects[hiddenFieldName] = val.newValue.map(function (term) { return "-1#;".concat(term.name, "|").concat(term.key, ";"); }).join('#');
+                                        objects[hiddenFieldName] = val.newValue
+                                            .map(function (term) { return "-1#;".concat(term.name, "|").concat(term.key, ";"); })
+                                            .join("#");
                                         return [3 /*break*/, 14];
                                     case 4:
                                         if (!(fieldType === "User")) return [3 /*break*/, 5];
@@ -181,41 +195,43 @@ var DynamicForm = /** @class */ (function (_super) {
                                         return [3 /*break*/, 14];
                                     case 8:
                                         if (!(fieldType === "UserMulti")) return [3 /*break*/, 9];
-                                        objects["".concat(columnInternalName, "Id")] = { results: val.newValue.lenght === 0 ? null : val.newValue };
+                                        objects["".concat(columnInternalName, "Id")] = {
+                                            results: val.newValue.lenght === 0 ? null : val.newValue,
+                                        };
                                         return [3 /*break*/, 14];
                                     case 9:
-                                        if (!(fieldType === 'Thumbnail')) return [3 /*break*/, 13];
+                                        if (!(fieldType === "Thumbnail")) return [3 /*break*/, 13];
                                         if (!additionalData) return [3 /*break*/, 11];
                                         return [4 /*yield*/, this_1.uploadImage(additionalData)];
                                     case 10:
-                                        uploadedImage = _c.sent();
+                                        uploadedImage = _d.sent();
                                         objects[columnInternalName] = JSON.stringify({
-                                            type: 'thumbnail',
+                                            type: "thumbnail",
                                             fileName: uploadedImage.Name,
                                             serverRelativeUrl: uploadedImage.ServerRelativeUrl,
-                                            id: uploadedImage.UniqueId
+                                            id: uploadedImage.UniqueId,
                                         });
                                         return [3 /*break*/, 12];
                                     case 11:
                                         objects[columnInternalName] = null;
-                                        _c.label = 12;
+                                        _d.label = 12;
                                     case 12: return [3 /*break*/, 14];
                                     case 13:
                                         objects[columnInternalName] = val.newValue;
-                                        _c.label = 14;
+                                        _d.label = 14;
                                     case 14: return [2 /*return*/];
                                 }
                             });
                         };
                         this_1 = this;
                         i = 0, len = fields.length;
-                        _b.label = 2;
+                        _c.label = 2;
                     case 2:
                         if (!(i < len)) return [3 /*break*/, 5];
                         return [5 /*yield**/, _loop_1(i, len)];
                     case 3:
-                        _b.sent();
-                        _b.label = 4;
+                        _c.sent();
+                        _c.label = 4;
                     case 4:
                         i++;
                         return [3 /*break*/, 2];
@@ -223,30 +239,35 @@ var DynamicForm = /** @class */ (function (_super) {
                         if (!onBeforeSubmit) return [3 /*break*/, 7];
                         return [4 /*yield*/, onBeforeSubmit(objects)];
                     case 6:
-                        isCancelled = _b.sent();
+                        isCancelled = _c.sent();
                         if (isCancelled) {
                             this.setState({
-                                isSaving: false
+                                isSaving: false,
                             });
                             return [2 /*return*/];
                         }
-                        _b.label = 7;
+                        _c.label = 7;
                     case 7:
                         newETag = undefined;
                         if (!listItemId) return [3 /*break*/, 12];
-                        _b.label = 8;
+                        _c.label = 8;
                     case 8:
-                        _b.trys.push([8, 10, , 11]);
-                        return [4 /*yield*/, sp.web.lists.getById(listId).items.getById(listItemId).update(objects, this.state.etag)];
+                        _c.trys.push([8, 10, , 11]);
+                        return [4 /*yield*/, sp.web.lists
+                                .getById(listId)
+                                .items.getById(listItemId)
+                                .update(objects, this.state.etag)];
                     case 9:
-                        iur = _b.sent();
-                        newETag = iur.data['odata.etag'];
+                        iur = _c.sent();
+                        newETag = iur.data["odata.etag"];
                         if (onSubmitted) {
-                            onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false ? iur.item : undefined);
+                            onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false
+                                ? iur.item
+                                : undefined);
                         }
                         return [3 /*break*/, 11];
                     case 10:
-                        error_1 = _b.sent();
+                        error_1 = _c.sent();
                         if (onSubmitError) {
                             onSubmitError(objects, error_1);
                         }
@@ -254,19 +275,23 @@ var DynamicForm = /** @class */ (function (_super) {
                         return [3 /*break*/, 11];
                     case 11: return [3 /*break*/, 26];
                     case 12:
-                        if (!(contentTypeId === undefined || contentTypeId === '' || !contentTypeId.startsWith('0x0120'))) return [3 /*break*/, 17];
-                        _b.label = 13;
+                        if (!(contentTypeId === undefined ||
+                            contentTypeId === "" ||
+                            !contentTypeId.startsWith("0x0120"))) return [3 /*break*/, 17];
+                        _c.label = 13;
                     case 13:
-                        _b.trys.push([13, 15, , 16]);
+                        _c.trys.push([13, 15, , 16]);
                         return [4 /*yield*/, sp.web.lists.getById(listId).items.add(objects)];
                     case 14:
-                        iar = _b.sent();
+                        iar = _c.sent();
                         if (onSubmitted) {
-                            onSubmitted(iar.data, this.props.returnListItemInstanceOnSubmit !== false ? iar.item : undefined);
+                            onSubmitted(iar.data, this.props.returnListItemInstanceOnSubmit !== false
+                                ? iar.item
+                                : undefined);
                         }
                         return [3 /*break*/, 16];
                     case 15:
-                        error_2 = _b.sent();
+                        error_2 = _c.sent();
                         if (onSubmitError) {
                             onSubmitError(objects, error_2);
                         }
@@ -274,40 +299,42 @@ var DynamicForm = /** @class */ (function (_super) {
                         return [3 /*break*/, 16];
                     case 16: return [3 /*break*/, 26];
                     case 17:
-                        if (!contentTypeId.startsWith('0x0120')) return [3 /*break*/, 26];
-                        _b.label = 18;
+                        if (!contentTypeId.startsWith("0x0120")) return [3 /*break*/, 26];
+                        _c.label = 18;
                     case 18:
-                        _b.trys.push([18, 25, , 26]);
-                        idField = 'ID';
-                        titleField = 'Title';
-                        contentTypeIdField = 'ContentTypeId';
+                        _c.trys.push([18, 25, , 26]);
+                        idField = "ID";
+                        titleField = "Title";
+                        contentTypeIdField = "ContentTypeId";
                         return [4 /*yield*/, sp.web.lists.getById(listId)];
                     case 19:
-                        library = _b.sent();
-                        folderTitle = (objects[titleField] !== undefined && objects[titleField] !== '') ?
-                            objects[titleField].replace(/["|*|:|<|>|?|/|\\||]/g, "_") : // Replace not allowed chars in folder name
-                            '';
+                        library = _c.sent();
+                        folderTitle = objects[titleField] !== undefined && objects[titleField] !== ""
+                            ? objects[titleField].replace(/["|*|:|<|>|?|/|\\||]/g, "_") // Replace not allowed chars in folder name
+                            : "";
                         return [4 /*yield*/, library.rootFolder.addSubFolderUsingPath(folderTitle)];
                     case 20:
-                        newFolder = _b.sent();
+                        newFolder = _c.sent();
                         return [4 /*yield*/, newFolder.listItemAllFields()];
                     case 21:
-                        fields_1 = _b.sent();
+                        fields_1 = _c.sent();
                         if (!fields_1[idField]) return [3 /*break*/, 23];
                         folderId = fields_1[idField];
                         // Set the content type ID for the target item
                         objects[contentTypeIdField] = contentTypeId;
                         return [4 /*yield*/, library.items.getById(folderId).update(objects)];
                     case 22:
-                        iur = _b.sent();
+                        iur = _c.sent();
                         if (onSubmitted) {
-                            onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false ? iur.item : undefined);
+                            onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false
+                                ? iur.item
+                                : undefined);
                         }
                         return [3 /*break*/, 24];
-                    case 23: throw new Error('Unable to read the ID of the just created folder or Document Set');
+                    case 23: throw new Error("Unable to read the ID of the just created folder or Document Set");
                     case 24: return [3 /*break*/, 26];
                     case 25:
-                        error_3 = _b.sent();
+                        error_3 = _c.sent();
                         if (onSubmitError) {
                             onSubmitError(objects, error_3);
                         }
@@ -316,11 +343,11 @@ var DynamicForm = /** @class */ (function (_super) {
                     case 26:
                         this.setState({
                             isSaving: false,
-                            etag: newETag
+                            etag: newETag,
                         });
                         return [3 /*break*/, 28];
                     case 27:
-                        error_4 = _b.sent();
+                        error_4 = _c.sent();
                         if (onSubmitError) {
                             onSubmitError(null, error_4);
                         }
@@ -337,13 +364,16 @@ var DynamicForm = /** @class */ (function (_super) {
                 switch (_a.label) {
                     case 0:
                         fieldCol = (this.state.fieldCollection || []).slice();
-                        field = fieldCol.filter(function (element, i) { return element.columnInternalName === internalName; })[0];
+                        field = fieldCol.filter(function (element, i) {
+                            return element.columnInternalName === internalName;
+                        })[0];
                         field.newValue = newValue;
                         field.additionalData = additionalData;
                         if (!(field.fieldType === "User" && newValue.length !== 0)) return [3 /*break*/, 4];
-                        if (!(newValue[0].id === undefined || parseInt(newValue[0].id, 10).toString() === "NaN")) return [3 /*break*/, 2];
+                        if (!(newValue[0].id === undefined ||
+                            parseInt(newValue[0].id, 10).toString() === "NaN")) return [3 /*break*/, 2];
                         user = newValue[0].secondaryText;
-                        if (user.indexOf('@') === -1) {
+                        if (user.indexOf("@") === -1) {
                             user = newValue[0].loginName;
                         }
                         return [4 /*yield*/, sp.web.ensureUser(user)];
@@ -363,9 +393,10 @@ var DynamicForm = /** @class */ (function (_super) {
                     case 5:
                         if (!(index < newValue.length)) return [3 /*break*/, 9];
                         element = newValue[index];
-                        if (!(element.id === undefined || parseInt(element.id, 10).toString() === "NaN")) return [3 /*break*/, 7];
+                        if (!(element.id === undefined ||
+                            parseInt(element.id, 10).toString() === "NaN")) return [3 /*break*/, 7];
                         user = element.secondaryText;
-                        if (user.indexOf('@') === -1) {
+                        if (user.indexOf("@") === -1) {
                             user = element.loginName;
                         }
                         return [4 /*yield*/, sp.web.ensureUser(user)];
@@ -381,7 +412,7 @@ var DynamicForm = /** @class */ (function (_super) {
                         return [3 /*break*/, 5];
                     case 9:
                         this.setState({
-                            fieldCollection: fieldCol
+                            fieldCollection: fieldCol,
                         });
                         return [2 /*return*/];
                 }
@@ -414,12 +445,14 @@ var DynamicForm = /** @class */ (function (_super) {
                         _b.label = 5;
                     case 5:
                         if (respectETag !== false) {
-                            etag = item['odata.etag'];
+                            etag = item["odata.etag"];
                         }
                         _b.label = 6;
                     case 6:
-                        if (!(contentTypeId === undefined || contentTypeId === '')) return [3 /*break*/, 8];
-                        return [4 /*yield*/, spList.contentTypes.select("Id", "Name").get()];
+                        if (!(contentTypeId === undefined || contentTypeId === "")) return [3 /*break*/, 8];
+                        return [4 /*yield*/, spList.contentTypes
+                                .select("Id", "Name")
+                                .get()];
                     case 7:
                         defaultContentType = _b.sent();
                         contentTypeId = defaultContentType[0].Id.StringValue;
@@ -459,7 +492,7 @@ var DynamicForm = /** @class */ (function (_super) {
                                         else {
                                             defaultValue = field.DefaultValue;
                                         }
-                                        if (!(fieldType === 'Choice' || fieldType === 'MultiChoice')) return [3 /*break*/, 1];
+                                        if (!(fieldType === "Choice" || fieldType === "MultiChoice")) return [3 /*break*/, 1];
                                         field.Choices.forEach(function (element) {
                                             choices_1.push({ key: element, text: element });
                                         });
@@ -504,15 +537,21 @@ var DynamicForm = /** @class */ (function (_super) {
                                         anchorId = field.AnchorId;
                                         if (item !== null) {
                                             item[field.InternalName].forEach(function (element) {
-                                                selectedTags_1.push({ key: element.TermGuid, name: element.Label });
+                                                selectedTags_1.push({
+                                                    key: element.TermGuid,
+                                                    name: element.Label,
+                                                });
                                             });
                                             defaultValue = selectedTags_1;
                                         }
                                         else {
                                             if (defaultValue !== null && defaultValue !== "") {
                                                 defaultValue.split(/#|;/).forEach(function (element) {
-                                                    if (element.indexOf('|') !== -1)
-                                                        selectedTags_1.push({ key: element.split('|')[1], name: element.split('|')[0] });
+                                                    if (element.indexOf("|") !== -1)
+                                                        selectedTags_1.push({
+                                                            key: element.split("|")[1],
+                                                            name: element.split("|")[0],
+                                                        });
                                                 });
                                                 defaultValue = selectedTags_1;
                                             }
@@ -529,13 +568,19 @@ var DynamicForm = /** @class */ (function (_super) {
                                     case 13:
                                         response = _e.sent();
                                         if (response) {
-                                            selectedTags_1.push({ key: response.TermID, name: response.Label });
+                                            selectedTags_1.push({
+                                                key: response.TermID,
+                                                name: response.Label,
+                                            });
                                             defaultValue = selectedTags_1;
                                         }
                                         return [3 /*break*/, 15];
                                     case 14:
                                         if (defaultValue !== "") {
-                                            selectedTags_1.push({ key: defaultValue.split('|')[1], name: defaultValue.split('|')[0].split('#')[1] });
+                                            selectedTags_1.push({
+                                                key: defaultValue.split("|")[1],
+                                                name: defaultValue.split("|")[0].split("#")[1],
+                                            });
                                             defaultValue = selectedTags_1;
                                         }
                                         _e.label = 15;
@@ -547,15 +592,19 @@ var DynamicForm = /** @class */ (function (_super) {
                                         if (!(fieldType === "DateTime")) return [3 /*break*/, 18];
                                         if (item !== null && item[field.InternalName])
                                             defaultValue = new Date(item[field.InternalName]);
-                                        else if (defaultValue === '[today]') {
+                                        else if (defaultValue === "[today]") {
                                             defaultValue = new Date();
                                         }
                                         schemaXml = field.SchemaXml;
-                                        dateFormatRegEx = /\s+Format="([^"]+)"/gmi.exec(schemaXml);
-                                        dateFormat = dateFormatRegEx && dateFormatRegEx.length ? dateFormatRegEx[1] : 'DateOnly';
+                                        dateFormatRegEx = /\s+Format="([^"]+)"/gim.exec(schemaXml);
+                                        dateFormat =
+                                            dateFormatRegEx && dateFormatRegEx.length
+                                                ? dateFormatRegEx[1]
+                                                : "DateOnly";
                                         return [4 /*yield*/, this_2._spService.getRegionalWebSettings()];
                                     case 17:
-                                        defaultDayOfWeek = (_e.sent()).FirstDayOfWeek;
+                                        defaultDayOfWeek = (_e.sent())
+                                            .FirstDayOfWeek;
                                         return [3 /*break*/, 28];
                                     case 18:
                                         if (!(fieldType === "UserMulti")) return [3 /*break*/, 22];
@@ -584,7 +633,7 @@ var DynamicForm = /** @class */ (function (_super) {
                                         _d = (_c = userEmails).push;
                                         return [4 /*yield*/, this_2._spService.getUserUPNFromFieldValue(listId, listItemId, field.InternalName, this_2.webURL)];
                                     case 24:
-                                        _d.apply(_c, [(_e.sent()) + '']);
+                                        _d.apply(_c, [(_e.sent()) + ""]);
                                         defaultValue = userEmails;
                                         return [3 /*break*/, 26];
                                     case 25:
@@ -615,7 +664,9 @@ var DynamicForm = /** @class */ (function (_super) {
                                             fieldTitle: field.Title,
                                             fieldDefaultValue: defaultValue,
                                             context: this_2.props.context,
-                                            disabled: this_2.props.disabled || (disabledFields && disabledFields.indexOf(field.InternalName) > -1),
+                                            disabled: this_2.props.disabled ||
+                                                (disabledFields &&
+                                                    disabledFields.indexOf(field.InternalName) > -1),
                                             listId: this_2.props.listId,
                                             columnInternalName: field.EntityPropertyName,
                                             label: field.Title,
@@ -628,7 +679,7 @@ var DynamicForm = /** @class */ (function (_super) {
                                             firstDayOfWeek: defaultDayOfWeek,
                                             listItemId: listItemId,
                                             principalType: principalType,
-                                            description: field.Description
+                                            description: field.Description,
                                         });
                                         tempFields.sort(function (a, b) { return a.Order - b.Order; });
                                         _e.label = 29;
@@ -669,7 +720,7 @@ var DynamicForm = /** @class */ (function (_super) {
                         return [2 /*return*/, {
                                 Name: file.fileName,
                                 ServerRelativeUrl: file.fileAbsoluteUrl,
-                                UniqueId: ''
+                                UniqueId: "",
                             }];
                     case 1: return [4 /*yield*/, file.downloadFileContent()];
                     case 2:
@@ -699,9 +750,9 @@ var DynamicForm = /** @class */ (function (_super) {
                         _a.trys.push([0, 4, , 5]);
                         context = this.props.context;
                         webAbsoluteUrl = !webUrl ? this.webURL : webUrl;
-                        apiUrl = '';
-                        if (contentTypeId !== undefined && contentTypeId !== '') {
-                            if (contentTypeId.startsWith('0x0120')) {
+                        apiUrl = "";
+                        if (contentTypeId !== undefined && contentTypeId !== "") {
+                            if (contentTypeId.startsWith("0x0120")) {
                                 apiUrl = "".concat(webAbsoluteUrl, "/_api/web/lists(@listId)/contenttypes('").concat(contentTypeId, "')/fields?@listId=guid'").concat(encodeURIComponent(listId), "'&$filter=ReadOnlyField eq false and (Hidden eq false or StaticName eq 'Title') and (FromBaseType eq false or StaticName eq 'Title')");
                             }
                             else {
@@ -731,6 +782,27 @@ var DynamicForm = /** @class */ (function (_super) {
                 }
             });
         }); };
+        _this.closeValidationErrorDialog = function () {
+            _this.setState({
+                isValidationErrorDialogOpen: false,
+            });
+        };
+        _this.getValidationErrorTitle = function () {
+            var errorTitle = strings.DynamicFormDialogValidationErrorTitle;
+            var validationDialogProps = _this.props.validationErrorDialogProps;
+            if (validationDialogProps === null || validationDialogProps === void 0 ? void 0 : validationDialogProps.customTitle) {
+                errorTitle = validationDialogProps.customTitle;
+            }
+            return errorTitle;
+        };
+        _this.getValidationErrorMessage = function () {
+            var errorMessage = strings.DynamicFormDialogValidationErrorMessage;
+            var validationDialogProps = _this.props.validationErrorDialogProps;
+            if (validationDialogProps === null || validationDialogProps === void 0 ? void 0 : validationDialogProps.customMessage) {
+                errorMessage = validationDialogProps.customMessage;
+            }
+            return errorMessage;
+        };
         // Initialize pnp sp
         if (_this.props.webAbsoluteUrl) {
             sp.setup({
@@ -738,28 +810,37 @@ var DynamicForm = /** @class */ (function (_super) {
                     headers: {
                         Accept: "application/json;odata=verbose",
                     },
-                    baseUrl: _this.props.webAbsoluteUrl
+                    baseUrl: _this.props.webAbsoluteUrl,
                 },
             });
         }
         else {
             sp.setup({
-                spfxContext: { pageContext: _this.props.context.pageContext }
+                spfxContext: { pageContext: _this.props.context.pageContext },
             });
         }
         // Initialize state
         _this.state = {
-            fieldCollection: []
+            fieldCollection: [],
+            isValidationErrorDialogOpen: false,
         };
         // Get SPService Factory
-        _this._spService = _this.props.webAbsoluteUrl ? new SPservice(_this.props.context, _this.props.webAbsoluteUrl) : new SPservice(_this.props.context);
+        _this._spService = _this.props.webAbsoluteUrl
+            ? new SPservice(_this.props.context, _this.props.webAbsoluteUrl)
+            : new SPservice(_this.props.context);
         return _this;
     }
     /**
      * Lifecycle hook when component is mounted
      */
     DynamicForm.prototype.componentDidMount = function () {
-        this.getFieldInformations().then(function () { }).catch(function () { });
+        this.getFieldInformations()
+            .then(function () {
+            /* no-op; */
+        })
+            .catch(function () {
+            /* no-op; */
+        });
     };
     /**
      * Default React component render method
@@ -768,20 +849,33 @@ var DynamicForm = /** @class */ (function (_super) {
         var _this = this;
         var _a = this.state, fieldCollection = _a.fieldCollection, isSaving = _a.isSaving;
         var fieldOverrides = this.props.fieldOverrides;
-        return (React.createElement("div", null, fieldCollection.length === 0 ? React.createElement("div", null,
-            React.createElement(ProgressIndicator, { label: strings.DynamicFormLoading, description: strings.DynamicFormPleaseWait })) :
-            React.createElement("div", null,
+        return (React.createElement("div", null,
+            fieldCollection.length === 0 ? (React.createElement("div", null,
+                React.createElement(ProgressIndicator, { label: strings.DynamicFormLoading, description: strings.DynamicFormPleaseWait }))) : (React.createElement("div", null,
                 fieldCollection.map(function (v, i) {
-                    if (fieldOverrides && Object.prototype.hasOwnProperty.call(fieldOverrides, v.columnInternalName)) {
+                    if (fieldOverrides &&
+                        Object.prototype.hasOwnProperty.call(fieldOverrides, v.columnInternalName)) {
                         v.disabled = v.disabled || isSaving;
                         return fieldOverrides[v.columnInternalName](v);
                     }
-                    return React.createElement(DynamicField, __assign({ key: v.columnInternalName }, v, { disabled: v.disabled || isSaving }));
+                    return (React.createElement(DynamicField, __assign({ key: v.columnInternalName }, v, { disabled: v.disabled || isSaving })));
                 }),
-                !this.props.disabled &&
-                    React.createElement(Stack, { className: styles.buttons, horizontal: true, tokens: stackTokens },
-                        React.createElement(PrimaryButton, { disabled: isSaving, text: strings.Save, onClick: function () { return _this.onSubmitClick(); } }),
-                        React.createElement(DefaultButton, { disabled: isSaving, text: strings.Cancel, onClick: this.props.onCancelled })))));
+                !this.props.disabled && (React.createElement(Stack, { className: styles.buttons, horizontal: true, tokens: stackTokens },
+                    React.createElement(PrimaryButton, { disabled: isSaving, text: strings.Save, onClick: function () { return _this.onSubmitClick(); } }),
+                    React.createElement(DefaultButton, { disabled: isSaving, text: strings.Cancel, onClick: this.props.onCancelled }))))),
+            React.createElement(Dialog, { hidden: !this.state.isValidationErrorDialogOpen, onDismiss: this.closeValidationErrorDialog, dialogContentProps: {
+                    type: DialogType.normal,
+                    title: this.getValidationErrorTitle(),
+                    showCloseButton: true,
+                }, modalProps: {
+                    className: styles.validationErrorDialog,
+                    isBlocking: true,
+                    containerClassName: "ms-dialogMainOverride",
+                } },
+                this.getValidationErrorMessage(),
+                React.createElement(DialogFooter, { className: styles.actions },
+                    React.createElement("div", { className: "ms-Dialog-actionsRight ".concat(styles.actionsRight) },
+                        React.createElement(DefaultButton, { className: styles.action, onClick: this.closeValidationErrorDialog, text: strings.CloseButton }))))));
     };
     return DynamicForm;
 }(React.Component));