mmhglobal-dynamicform 2.1.0 → 2.1.1

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -7826,6 +7826,10 @@ class InputErrorMessageComponent extends FieldBase {
             return false;
         }
         const control = this.form.controls[this.data.Value];
+        if (!control) {
+            console.log(`Unable to find form control: ' ${this.data.Value}`);
+            return false;
+        }
         const isShow = !control.valid && !control.untouched;
         if (isShow) {
             of(this.componentErrorHandler.getErrorMessageForInvalidInput(this.group, null, this.data.Value)).pipe(switchMap((errMessageTranslationInput) => {
@@ -11495,8 +11499,14 @@ class ZudfComponent extends ContainerFieldBase {
         this.toastService = toastService;
         this.componentErrorHandlerService = componentErrorHandlerService;
         this.cdr = cdr;
-        // formFields: any[]; // populate using field element.
+        // formFields: any[]; // populate using field element. 
         this.componentProperties = new ZComponentProperties();
+        this.prefixValueOption = '_zudfmvgOptions';
+        this.prefixDataSourceName = '_zudfmvgDataSource';
+        this.prefixColumnFieldsName = '_zudfmvgColumnFields';
+        this.prefixCustomAddButtonOnClick = '_CustomAddButtonOnClick';
+        this.prefixCustomResetButtonOnClick = '_CustomResetButtonOnClick';
+        this.prefixCustomRemoveButtonOnClick = '_CustomRemoveButtonOnClick';
         this.setEnable = (status) => {
             this.componentProperties.isReadOnly = !status;
         };
@@ -11688,16 +11698,19 @@ class ZudfComponent extends ContainerFieldBase {
     renderFieldElement(fieldElements) {
         this.clearZModel();
         if (fieldElements) {
+            this.loadedFieldsSequence = {};
             const formControls = {};
             fieldElements = this.generateFormControls(fieldElements, formControls);
             // Render form controls to new form group.
             this.form = new FormGroup(formControls);
             this.data.Value = fieldElements;
             this.group[this.componentScopeName].form = this.form;
+            this.group[this.componentScopeName]['loadedFieldsSequence'] = this.loadedFieldsSequence;
         }
     }
-    generateFormControls(fieldArray, formControls, containerName) {
-        fieldArray.forEach(field => {
+    generateFormControls(fieldArray, formControls, containerName, isMultiValueGroup = false, fieldValueGrouped = false, index = '') {
+        fieldArray.forEach((field, i) => {
+            const fieldIndex = index ? `${index}_${i + 1}` : `${i}`;
             this.fieldService.patchFieldProperty(field);
             if (typeof field.Value === "string" && field.Value.indexOf(".") !== -1) {
                 if (['zgrid', 'ztree', 'zimg', 'textareajson'].indexOf(field.Type) === -1) {
@@ -11708,10 +11721,21 @@ class ZudfComponent extends ContainerFieldBase {
                 const zudfGroup = this.group[this.componentScopeName];
                 if (Array.isArray(field.Value)) {
                     // insert multivaluegroup to the card value if true
+                    const fieldValueGrouped = field.Type == ComponentType.grouping ? true : false;
+                    this.loadedFieldsSequence[fieldIndex] = {
+                        name: field.MultiValuedGroup ? `${this.generateFormControlName(field.Name)}${this.prefixValueOption}` : `${this.generateFormControlName(field.Name)}`,
+                        label: field.Title,
+                        type: field.Type,
+                        isMultiValueGroup: field.MultiValuedGroup ?? false,
+                        isGrouped: false,
+                        isVisible: field.Visible ?? false,
+                        isRequired: field.IsRequired ?? false,
+                        isReadOnly: field.ReadOnly ?? false
+                    };
                     if (field.MultiValuedGroup) {
                         this.setMultiValueGroup(field);
                     }
-                    this.generateFormControls(field.Value, formControls, field.Name);
+                    this.generateFormControls(field.Value, formControls, field.Name, field.MultiValuedGroup, fieldValueGrouped, fieldIndex);
                 }
                 else {
                     // before generate FormControl, we need to add 2 attribute to the field when render.
@@ -11727,8 +11751,21 @@ class ZudfComponent extends ContainerFieldBase {
                     const isVisible = ZComponentHelper.isVisibleFormControl(this, field);
                     const isRequired = ZComponentHelper.isRequiredFormControl(this, field);
                     if (isFormControl === true) {
+                        if (!this.loadedFieldsSequence) {
+                            this.loadedFieldsSequence = {};
+                        }
                         field.Name = this.generateFormControlName(field.Name, containerName);
                         field.Value = this.generateFormControlName(field.Value, containerName);
+                        this.loadedFieldsSequence[fieldIndex] = {
+                            name: field.Name,
+                            label: field.Label,
+                            type: field.Type,
+                            isMultiValueGroup: isMultiValueGroup,
+                            isGrouped: fieldValueGrouped,
+                            isVisible: field.Visible ?? false,
+                            isRequired: field.IsRequired ?? false,
+                            isReadOnly: field.ReadOnly ?? false
+                        };
                         if (containerName) {
                             if (!zudfGroup[containerName].includes(field.Value)) {
                                 zudfGroup[containerName].push(field.Value);
@@ -11816,8 +11853,8 @@ class ZudfComponent extends ContainerFieldBase {
         // Update grid values for any arrays in the model data
         for (const model in patchedModelData) {
             if (Array.isArray(patchedModelData[model])) {
-                const gridValue = `${model}_Options`;
-                const gridDataSource = `${model}_DataSource`;
+                const gridValue = `${model}${this.prefixValueOption}`;
+                const gridDataSource = `${model}${this.prefixDataSourceName}`;
                 // Update the data source for the grid
                 group[gridDataSource] = patchedModelData[model];
                 // Update the grid value
@@ -12006,9 +12043,9 @@ class ZudfComponent extends ContainerFieldBase {
     setMultiValueGroup(data, dataIndex) {
         // Need to declare name, value, datasource, columnfields attribute for grid.
         const name = this.generateFormControlName(data.Name);
-        const gridValueName = `${name}_Options`;
-        const gridDataSourceName = `${name}_DataSource`;
-        const gridColumnFieldsName = `${name}_ColumnFields`;
+        const gridValueName = `${name}${this.prefixValueOption}`;
+        const gridDataSourceName = `${name}${this.prefixDataSourceName}`;
+        const gridColumnFieldsName = `${name}${this.prefixColumnFieldsName}`;
         // Generate a unique name for the multi-value group scope.
         const multiValueGroupScopeName = `mvg_${data.Name}`;
         if (!this.group['mvglist']) {
@@ -12070,10 +12107,10 @@ class ZudfComponent extends ContainerFieldBase {
         });
         this.group[gridDataSourceName] = [];
         this.group[gridColumnFieldsName] = groupFieldElements;
-        // Create grid column based on field elements and insert them into the grid.
-        this.group[`${name}_CustomAddButtonOnClick`] = this.captureContainerFieldValueToModel.bind(this, this.group, gridValueName, gridDataSourceName, containerName);
-        this.group[`${name}_CustomResetButtonOnClick`] = this.clearContainerRelatedFieldValue.bind(this, this.group, containerName);
-        this.group[`${name}_CustomRemoveButtonOnClick`] = this.removeGridRow.bind(this, gridValueName, gridDataSourceName);
+        // Create grid column based on field elements and insert them into the grid. 
+        this.group[`${name}${this.prefixCustomAddButtonOnClick}`] = this.captureContainerFieldValueToModel.bind(this, this.group, gridValueName, gridDataSourceName, containerName);
+        this.group[`${name}${this.prefixCustomResetButtonOnClick}`] = this.clearContainerRelatedFieldValue.bind(this, this.group, containerName);
+        this.group[`${name}${this.prefixCustomRemoveButtonOnClick}`] = this.removeGridRow.bind(this, gridValueName, gridDataSourceName);
         if (dataIndex) {
             this.appendToDisplayModel(element, dataIndex);
         }