Fix - Issue 1592 - Dynamic form - Number validations are working, but the percentage values are not getting saved

CHANGELOG.md

@@ -15,6 +15,8 @@
 - `ModernTaxonomyPicker`: can't find term when UI is in language not supported by term store [#1573](https://github.com/pnp/sp-dev-fx-controls-react/issues/1573)
 - `AdaptiveCardHost`: Add null check for adaptive card elements [#1574](https://github.com/pnp/sp-dev-fx-controls-react/pull/1574)
 - `ControlsTestWebPart`: Updated the ControlsTestWebPart to show the controls filtered by control type [#1547](https://github.com/pnp/sp-dev-fx-controls-react/pull/1547)
+- `fast-serve`: Fast-serve updated to the latest version and serve warnings fixed [#1589](https://github.com/pnp/sp-dev-fx-controls-react/pull/1589)
+- `DynamicForm`: DynamicForm Number min max [#1585](https://github.com/pnp/sp-dev-fx-controls-react/pull/1585)
 
 ### Fixes
 
@@ -30,10 +32,11 @@
 - `PeoplePicker`: Shows wrong value in Dynamic Form when null is provided [#1421](https://github.com/pnp/sp-dev-fx-controls-react/issues/1421)
 - `DynamicForm`: Error on save when clearing person from Person or Group field and leaving it blank [#1578](https://github.com/pnp/sp-dev-fx-controls-react/issues/1578)
 - `DynamicForm`: Number validation is not working, if the field is set to minimum and maximum value [#1571](https://github.com/pnp/sp-dev-fx-controls-react/issues/1571)
+- `DynamicForm`: controls are shown with error messages even if the values are assigned [#1133](https://github.com/pnp/sp-dev-fx-controls-react/issues/1586)
 
 ### Contributors
 
-Special thanks to our contributors (in alphabetical order): [Andreas Omayrat](https://github.com/andreasomayrat), [Ayoub](https://github.com/ayoubqrt), [Desislav](https://github.com/DMichev), [Guido Zambarda](https://github.com/GuidoZam), [Nishkalank Bezawada](https://github.com/NishkalankBezawada), [Patrik Hellgren](https://github.com/patrikhellgren), [Rico van de Ven](https://github.com/RicoNL), [Sharepointalist](https://github.com/sharepointalist), [Zhephyr](https://github.com/Zhephyr54).
+Special thanks to our contributors (in alphabetical order): [Andreas Omayrat](https://github.com/andreasomayrat), [Ayoub](https://github.com/ayoubqrt), [Desislav](https://github.com/DMichev), [Guido Zambarda](https://github.com/GuidoZam), [João Mendes](https://github.com/joaojmendes), [Nishkalank Bezawada](https://github.com/NishkalankBezawada), [Patrik Hellgren](https://github.com/patrikhellgren), [Rico van de Ven](https://github.com/RicoNL), [Sergei Sergeev](https://github.com/s-KaiNet), [Sharepointalist](https://github.com/sharepointalist), [Zhephyr](https://github.com/Zhephyr54).
 
 ## 3.14.0
 

docs/documentation/docs/about/release-notes.md

@@ -15,6 +15,8 @@
 - `ModernTaxonomyPicker`: can't find term when UI is in language not supported by term store [#1573](https://github.com/pnp/sp-dev-fx-controls-react/issues/1573)
 - `AdaptiveCardHost`: Add null check for adaptive card elements [#1574](https://github.com/pnp/sp-dev-fx-controls-react/pull/1574)
 - `ControlsTestWebPart`: Updated the ControlsTestWebPart to show the controls filtered by control type [#1547](https://github.com/pnp/sp-dev-fx-controls-react/pull/1547)
+- `fast-serve`: Fast-serve updated to the latest version and serve warnings fixed [#1589](https://github.com/pnp/sp-dev-fx-controls-react/pull/1589)
+- `DynamicForm`: DynamicForm Number min max [#1585](https://github.com/pnp/sp-dev-fx-controls-react/pull/1585)
 
 ### Fixes
 
@@ -30,10 +32,11 @@
 - `PeoplePicker`: Shows wrong value in Dynamic Form when null is provided [#1421](https://github.com/pnp/sp-dev-fx-controls-react/issues/1421)
 - `DynamicForm`: Error on save when clearing person from Person or Group field and leaving it blank [#1578](https://github.com/pnp/sp-dev-fx-controls-react/issues/1578)
 - `DynamicForm`: Number validation is not working, if the field is set to minimum and maximum value [#1571](https://github.com/pnp/sp-dev-fx-controls-react/issues/1571)
+- `DynamicForm`: controls are shown with error messages even if the values are assigned [#1133](https://github.com/pnp/sp-dev-fx-controls-react/issues/1586)
 
 ### Contributors
 
-Special thanks to our contributors (in alphabetical order): [Andreas Omayrat](https://github.com/andreasomayrat), [Ayoub](https://github.com/ayoubqrt), [Desislav](https://github.com/DMichev), [Guido Zambarda](https://github.com/GuidoZam), [Nishkalank Bezawada](https://github.com/NishkalankBezawada), [Patrik Hellgren](https://github.com/patrikhellgren), [Rico van de Ven](https://github.com/RicoNL), [Sharepointalist](https://github.com/sharepointalist), [Zhephyr](https://github.com/Zhephyr54).
+Special thanks to our contributors (in alphabetical order): [Andreas Omayrat](https://github.com/andreasomayrat), [Ayoub](https://github.com/ayoubqrt), [Desislav](https://github.com/DMichev), [Guido Zambarda](https://github.com/GuidoZam), [João Mendes](https://github.com/joaojmendes), [Nishkalank Bezawada](https://github.com/NishkalankBezawada), [Patrik Hellgren](https://github.com/patrikhellgren), [Rico van de Ven](https://github.com/RicoNL), [Sergei Sergeev](https://github.com/s-KaiNet), [Sharepointalist](https://github.com/sharepointalist), [Zhephyr](https://github.com/Zhephyr54).
 
 ## 3.14.0
 

src/controls/dynamicForm/DynamicForm.tsx

@@ -206,11 +206,14 @@ 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;
           }
-        } else if (val.fieldType === "Number") {
-          if ((val.newValue < val.minimumValue) || (val.newValue > val.maximumValue)) {
-            shouldBeReturnBack = true;
-          }
+          shouldBeReturnBack = this.validateNumberOnSubmit(val);
         }
       });
       if (shouldBeReturnBack) {
@@ -840,4 +843,20 @@ 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;
+  }
 }