Fix for number field validation and behaviour, addition of currency constraint validation

src/controls/dynamicForm/CurrencyMap.ts

@@ -0,0 +1,249 @@
+export default {
+    AD: 'EUR',
+    AE: 'AED',
+    AF: 'AFN',
+    AG: 'XCD',
+    AI: 'XCD',
+    AL: 'ALL',
+    AM: 'AMD',
+    AO: 'AOA',
+    AR: 'ARS',
+    AS: 'USD',
+    AT: 'EUR',
+    AU: 'AUD',
+    AW: 'AWG',
+    AX: 'EUR',
+    AZ: 'AZN',
+    BA: 'BAM',
+    BB: 'BBD',
+    BD: 'BDT',
+    BE: 'EUR',
+    BF: 'XOF',
+    BG: 'BGN',
+    BH: 'BHD',
+    BI: 'BIF',
+    BJ: 'XOF',
+    BL: 'EUR',
+    BM: 'BMD',
+    BN: 'BND',
+    BO: 'BOB',
+    BQ: 'USD',
+    BR: 'BRL',
+    BS: 'BSD',
+    BT: 'BTN',
+    BV: 'NOK',
+    BW: 'BWP',
+    BY: 'BYN',
+    BZ: 'BZD',
+    CA: 'CAD',
+    CC: 'AUD',
+    CD: 'CDF',
+    CF: 'XAF',
+    CG: 'XAF',
+    CH: 'CHF',
+    CI: 'XOF',
+    CK: 'NZD',
+    CL: 'CLP',
+    CM: 'XAF',
+    CN: 'CNY',
+    CO: 'COP',
+    CR: 'CRC',
+    CU: 'CUP',
+    CV: 'CVE',
+    CW: 'ANG',
+    CX: 'AUD',
+    CY: 'EUR',
+    CZ: 'CZK',
+    DE: 'EUR',
+    DJ: 'DJF',
+    DK: 'DKK',
+    DM: 'XCD',
+    DO: 'DOP',
+    DZ: 'DZD',
+    EC: 'USD',
+    EE: 'EUR',
+    EG: 'EGP',
+    EH: 'MAD',
+    ER: 'ERN',
+    ES: 'EUR',
+    ET: 'ETB',
+    FI: 'EUR',
+    FJ: 'FJD',
+    FK: 'FKP',
+    FM: 'USD',
+    FO: 'DKK',
+    FR: 'EUR',
+    GA: 'XAF',
+    GB: 'GBP',
+    GD: 'XCD',
+    GE: 'GEL',
+    GF: 'EUR',
+    GG: 'GBP',
+    GH: 'GHS',
+    GI: 'GIP',
+    GL: 'DKK',
+    GM: 'GMD',
+    GN: 'GNF',
+    GP: 'EUR',
+    GQ: 'XAF',
+    GR: 'EUR',
+    GS: 'GBP',
+    GT: 'GTQ',
+    GU: 'USD',
+    GW: 'XOF',
+    GY: 'GYD',
+    HK: 'HKD',
+    HM: 'AUD',
+    HN: 'HNL',
+    HR: 'EUR',
+    HT: 'HTG',
+    HU: 'HUF',
+    ID: 'IDR',
+    IE: 'EUR',
+    IL: 'ILS',
+    IM: 'GBP',
+    IN: 'INR',
+    IO: 'USD',
+    IQ: 'IQD',
+    IR: 'IRR',
+    IS: 'ISK',
+    IT: 'EUR',
+    JE: 'GBP',
+    JM: 'JMD',
+    JO: 'JOD',
+    JP: 'JPY',
+    KE: 'KES',
+    KG: 'KGS',
+    KH: 'KHR',
+    KI: 'AUD',
+    KM: 'KMF',
+    KN: 'XCD',
+    KP: 'KPW',
+    KR: 'KRW',
+    KW: 'KWD',
+    KY: 'KYD',
+    KZ: 'KZT',
+    LA: 'LAK',
+    LB: 'LBP',
+    LC: 'XCD',
+    LI: 'CHF',
+    LK: 'LKR',
+    LR: 'LRD',
+    LS: 'LSL',
+    LT: 'EUR',
+    LU: 'EUR',
+    LV: 'EUR',
+    LY: 'LYD',
+    MA: 'MAD',
+    MC: 'EUR',
+    MD: 'MDL',
+    ME: 'EUR',
+    MF: 'EUR',
+    MG: 'MGA',
+    MH: 'USD',
+    MK: 'MKD',
+    ML: 'XOF',
+    MM: 'MMK',
+    MN: 'MNT',
+    MO: 'MOP',
+    MP: 'USD',
+    MQ: 'EUR',
+    MR: 'MRO',
+    MS: 'XCD',
+    MT: 'EUR',
+    MU: 'MUR',
+    MV: 'MVR',
+    MW: 'MWK',
+    MX: 'MXN',
+    MY: 'MYR',
+    MZ: 'MZN',
+    NA: 'NAD',
+    NC: 'XPF',
+    NE: 'XOF',
+    NF: 'AUD',
+    NG: 'NGN',
+    NI: 'NIO',
+    NL: 'EUR',
+    NO: 'NOK',
+    NP: 'NPR',
+    NR: 'AUD',
+    NU: 'NZD',
+    NZ: 'NZD',
+    OM: 'OMR',
+    PA: 'PAB',
+    PE: 'PEN',
+    PF: 'XPF',
+    PG: 'PGK',
+    PH: 'PHP',
+    PK: 'PKR',
+    PL: 'PLN',
+    PM: 'EUR',
+    PN: 'NZD',
+    PR: 'USD',
+    PS: 'ILS',
+    PT: 'EUR',
+    PW: 'USD',
+    PY: 'PYG',
+    QA: 'QAR',
+    RE: 'EUR',
+    RO: 'RON',
+    RS: 'RSD',
+    RU: 'RUB',
+    RW: 'RWF',
+    SA: 'SAR',
+    SB: 'SBD',
+    SC: 'SCR',
+    SD: 'SDG',
+    SE: 'SEK',
+    SG: 'SGD',
+    SH: 'SHP',
+    SI: 'EUR',
+    SJ: 'NOK',
+    SK: 'EUR',
+    SL: 'SLL',
+    SM: 'EUR',
+    SN: 'XOF',
+    SO: 'SOS',
+    SR: 'SRD',
+    ST: 'STD',
+    SV: 'SVC',
+    SX: 'ANG',
+    SY: 'SYP',
+    SZ: 'SZL',
+    TC: 'USD',
+    TD: 'XAF',
+    TF: 'EUR',
+    TG: 'XOF',
+    TH: 'THB',
+    TJ: 'TJS',
+    TK: 'NZD',
+    TL: 'USD',
+    TM: 'TMT',
+    TN: 'TND',
+    TO: 'TOP',
+    TR: 'TRY',
+    TT: 'TTD',
+    TV: 'AUD',
+    TW: 'TWD',
+    TZ: 'TZS',
+    UA: 'UAH',
+    UG: 'UGX',
+    UM: 'USD',
+    US: 'USD',
+    UY: 'UYU',
+    UZ: 'UZS',
+    VA: 'EUR',
+    VC: 'XCD',
+    VE: 'VEF',
+    VG: 'USD',
+    VI: 'USD',
+    VN: 'VND',
+    VU: 'VUV',
+    WF: 'XPF',
+    WS: 'WST',
+    YE: 'YER',
+    YT: 'EUR',
+    ZA: 'ZAR',
+    ZM: 'ZMW',
+    ZW: 'ZWL'
+    };

src/controls/dynamicForm/DynamicForm.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @microsoft/spfx/no-async-await */
 import { SPHttpClient } from "@microsoft/sp-http";
-import { sp } from "@pnp/sp/presets/all";
+import { IInstalledLanguageInfo, sp } from "@pnp/sp/presets/all";
 import * as strings from "ControlStrings";
 import {
   DefaultButton,
@@ -206,14 +206,16 @@ export class DynamicForm extends React.Component<
           } else if (Array.isArray(val.newValue) && val.newValue.length === 0) {
             val.fieldDefaultValue = null;
             shouldBeReturnBack = true;
-          } else if(val.fieldType === "Number"){
-            shouldBeReturnBack = this.validateNumberOnSubmit(val);
-          } 
-        } else if(val.fieldType === "Number"){
-          if(val.newValue === null){
-            val.newValue = val.fieldDefaultValue;
           }
-          shouldBeReturnBack = this.validateNumberOnSubmit(val);
+        } 
+        if (val.fieldType === "Number") {
+          if (val.showAsPercentage) val.newValue /= 100;
+          if (this.isEmptyNumOrString(val.newValue) && (val.minimumValue !== null || val.maximumValue !== null)) {
+            val.newValue = val.fieldDefaultValue = null; 
+          }
+          if (!this.isEmptyNumOrString(val.newValue) && (isNaN(Number(val.newValue)) || (val.newValue < val.minimumValue) || (val.newValue > val.maximumValue))) {
+            shouldBeReturnBack = true;
+          }
         }
       });
       if (shouldBeReturnBack) {
@@ -343,7 +345,7 @@ export class DynamicForm extends React.Component<
         try {
           const contentTypeIdField = "ContentTypeId";
           //check if item contenttype is passed, then update the object with content type id, else, pass the object 
-          contentTypeId !== undefined && contentTypeId.startsWith("0x01") ? objects[contentTypeIdField] = contentTypeId : objects;
+          if (contentTypeId !== undefined && contentTypeId.startsWith("0x01")) objects[contentTypeIdField] = contentTypeId;
           const iar = await sp.web.lists.getById(listId).items.add(objects);
           if (onSubmitted) {
             onSubmitted(
@@ -524,6 +526,7 @@ export class DynamicForm extends React.Component<
           order++;
           const fieldType = field.TypeAsString;
           field.order = order;
+          let cultureName: string;
           let hiddenName = "";
           let termSetId = "";
           let anchorId = "";
@@ -549,10 +552,14 @@ export class DynamicForm extends React.Component<
             });
           } else if (fieldType === "Note") {
             richText = field.RichText;
-          } else if (fieldType === "Number") {
+          } else if (fieldType === "Number" || fieldType === "Currency") {
             minValue = field.MinimumValue;
             maxValue = field.MaximumValue;
-            showAsPercentage = field.ShowAsPercentage;
+            if (fieldType === "Number") {
+              showAsPercentage = field.ShowAsPercentage;
+            } else {
+              cultureName = this.cultureNameLookup(field.CurrencyLocaleId);
+            }
           } else if (fieldType === "Lookup") {
             lookupListId = field.LookupList;
             lookupField = field.LookupField;
@@ -699,15 +706,16 @@ export class DynamicForm extends React.Component<
             defaultValue = JSON.parse(defaultValue);
           } else if (fieldType === "Boolean") {
             defaultValue = Boolean(Number(defaultValue));
-          }
-
+          } 
+          
           tempFields.push({
             newValue: null,
             fieldTermSetId: termSetId,
             fieldAnchorId: anchorId,
             options: choices,
             lookupListID: lookupListId,
             lookupField: lookupField,
+            cultureName,
             changedValue: defaultValue,
             fieldType: field.TypeAsString,
             fieldTitle: field.Title,
@@ -732,20 +740,31 @@ export class DynamicForm extends React.Component<
             description: field.Description,
             minimumValue: minValue,
             maximumValue: maxValue,
-            showAsPercentage: showAsPercentage,
+            showAsPercentage: showAsPercentage
           });
           tempFields.sort((a, b) => a.Order - b.Order);
         }
       }
 
-      this.setState({ fieldCollection: tempFields, etag: etag });
+      let installedLanguages: IInstalledLanguageInfo[];
+      if (tempFields.filter(f => f.fieldType === "Currency").length > 0) {
+        installedLanguages = await sp.web.regionalSettings.getInstalledLanguages();        
+      }
+
+      this.setState({ fieldCollection: tempFields, installedLanguages, etag });
       //return arrayItems;
     } catch (error) {
       console.log(`Error get field informations`, error);
       return null;
     }
   };
 
+  private cultureNameLookup(lcid: number): string {
+    const pageCulture = this.props.context.pageContext.cultureInfo.currentCultureName;
+    if (!lcid) return pageCulture;
+    return this.state.installedLanguages?.find(lang => lang.Lcid === lcid).DisplayName ?? pageCulture;
+  }
+
   private uploadImage = async (
     file: IFilePickerResult
   ): Promise<IUploadImageResult> => {
@@ -852,19 +871,8 @@ export class DynamicForm extends React.Component<
     return errorMessage;
   };
 
-  private validateNumberOnSubmit = (val:IDynamicFieldProps): boolean => {
-    let shouldBeReturnBack = false;
-    if (val.fieldType === "Number" && val.showAsPercentage) {
-      const minValue = val.minimumValue !== undefined ? val.minimumValue * 100 : undefined;
-      const maxValue = val.maximumValue !== undefined ? val.maximumValue * 100 : undefined;
-      if ((val.newValue < minValue) || (val.newValue > maxValue)) {
-        shouldBeReturnBack = true;
-      }
-    } else if(val.fieldType === "Number" && !val.showAsPercentage){
-      if ((val.newValue < val.minimumValue) || (val.newValue > val.maximumValue)) {
-        shouldBeReturnBack = true;
-      }
-    }
-    return shouldBeReturnBack;
+  private isEmptyNumOrString(value: string | number): boolean {
+    if (value === null) return true;
+    if ((value?.toString().trim().length || 0) === 0) return true;
   }
 }