DynamicForm - disable save button (#1810)

* enable/disable save button * update documentation --------- Co-authored-by: matteo <>
pnp · Aug 10, 2024 · 584b06c · 584b06c
1 parent a1270d0
commit 584b06c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/docs/documentation/docs/controls/DynamicForm.md b/docs/documentation/docs/controls/DynamicForm.md
@@ -61,6 +61,7 @@ The `DynamicForm` can be configured with the following properties:
 | webAbsoluteUrl | string | no | Absolute Web Url of target site (user requires permissions). |
 | fieldOverrides | {[columnInternalName: string] : {(fieldProperties: IDynamicFieldProps): React.ReactElement\<IDynamicFieldProps\>}} | no | Key value pair for fields you want to override.  Key is the internal field name, value is the function to be called for the custom element to render. |
 | respectEtag | boolean | no | Specifies if the form should respect the ETag of the item. Default - `true` |
+| saveDisabled | boolean | no | Specifies if save button is disabled. |
 | validationErrorDialogProps | IValidationErrorDialogProps | no | Specifies validation error dialog properties |
 | customIcons | { [ columnInternalName: string ]: string } | no | Specifies custom icons for the form. The key of this dictionary is the column internal name, the value is the Fluent UI icon name. | 
 

diff --git a/src/controls/dynamicForm/DynamicForm.tsx b/src/controls/dynamicForm/DynamicForm.tsx
@@ -221,7 +221,7 @@ export class DynamicForm extends React.Component<
             {!this.props.disabled && (
               <Stack className={styles.buttons} horizontal tokens={stackTokens}>
                 <PrimaryButton
-                  disabled={isSaving}
+                  disabled={this.props.saveDisabled || isSaving}
                   text={strings.Save}
                   onClick={() => this.onSubmitClick()}
                 />
@@ -418,7 +418,7 @@ export class DynamicForm extends React.Component<
         if (field.newValue !== null && field.newValue !== undefined) {
 
           let value = field.newValue;
-          
+
           if (["Lookup", "LookupMulti", "User", "UserMulti", "TaxonomyFieldTypeMulti"].indexOf(fieldType) < 0) {
             objects[columnInternalName] = value;
           }

diff --git a/src/controls/dynamicForm/IDynamicFormProps.ts b/src/controls/dynamicForm/IDynamicFormProps.ts
@@ -13,6 +13,10 @@ export interface IDynamicFormProps {
    * Specifies if the form is disabled
    */
   disabled?: boolean;
+  /**
+   * Specify if save button is disabled.
+   */
+  saveDisabled?: boolean;
   /**
    * List id
    */