Submit button disabled on invalid forms

- Deep forms updated to address redux-form issue: redux-form/redux-form#391
hydrotik · May 24, 2016 · 8c9c071 · 8c9c071
1 parent 334bd29
commit 8c9c071
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 11 deletions.
diff --git a/src/global/client/pages/admin/components/AdminDetails/AdminDetails.tsx b/src/global/client/pages/admin/components/AdminDetails/AdminDetails.tsx
@@ -21,7 +21,7 @@ import {REDUCER_NAME} from './reducers';
 import './_AdminDetails.scss';
 
 interface BaseProps {
-    
+
 }
 
 interface StateProps extends BaseProps {

diff --git a/src/global/client/pages/admin/components/AdminDetails/components/AdminGroupsForm.tsx b/src/global/client/pages/admin/components/AdminDetails/components/AdminGroupsForm.tsx
@@ -18,12 +18,19 @@ interface BaseProps {
 }
 
 interface ReduxFormProps extends BaseProps {
+    invalid: boolean
+    pristine: boolean
     submitting: boolean
     handleSubmit: (any) => any
     changeFieldValue: (field: any, value: any) => any
     fields: {
         addGroup: any
         selectedGroups: any
+
+        // touched is a hack for deep form arrays.
+        // Possibly upgrade to v6 to resolve.
+        // See: https://github.com/erikras/redux-form/issues/391
+        touched: any 
     }
 }
 
@@ -42,12 +49,16 @@ class Form extends React.Component<BaseProps, any> {
     render(): React.ReactElement<any> {
         const {
             submitting,
+            pristine,
+
+            invalid,
             handleSubmit,
             changeFieldValue,
             allGroups,
             fields: {
                 addGroup,
-                selectedGroups
+                selectedGroups,
+                touched
             }
         } = this.props as ReduxFormProps;
         return (
@@ -62,6 +73,8 @@ class Form extends React.Component<BaseProps, any> {
                                 content: (<span>Groups updated</span>)
                             }
                         });
+
+                        changeFieldValue('touched', false);
                     })
                     .catch((err) => {
                         this.setState({
@@ -115,6 +128,7 @@ class Form extends React.Component<BaseProps, any> {
                                         selectedGroups.addField({id: group.id, name: group.name});
                                     }
                                     changeFieldValue('addGroup', '');
+                                    changeFieldValue('touched', true);
                                 }
                             }
                         >
@@ -148,6 +162,7 @@ class Form extends React.Component<BaseProps, any> {
                                     onClick={
                                         (e) => {
                                             selectedGroups.removeField(index);
+                                            changeFieldValue('touched', true);
                                         }
                                     }
                                 >
@@ -161,6 +176,7 @@ class Form extends React.Component<BaseProps, any> {
                 <Button
                     type="submit"
                     inputClasses={{"btn-primary": true}}
+                    disabled={invalid || submitting || !touched.value}
                 >
                     Save changes
                 </Button>
@@ -171,7 +187,7 @@ class Form extends React.Component<BaseProps, any> {
 
 export const AdminGroupsForm = reduxForm({
     form: 'adminGroupsForm',
-    fields: ['addGroup', 'selectedGroups[].id', 'selectedGroups[].name'],
+    fields: ['addGroup', 'touched', 'selectedGroups[].id', 'selectedGroups[].name'],
     validate,
     returnRejectedSubmitPromise: true
 },

diff --git a/src/global/client/pages/admin/components/AdminGroupDetails/components/AdminGroupNameForm.tsx b/src/global/client/pages/admin/components/AdminGroupDetails/components/AdminGroupNameForm.tsx
@@ -19,6 +19,8 @@ interface ReduxFormProps extends BaseProps {
     fields: {
         name: any
     }
+    pristine: boolean
+    invalid: boolean
     submitting: boolean
     handleSubmit: (any) => any
 }
@@ -37,6 +39,8 @@ class Form extends React.Component<BaseProps, any> {
         const {
             handleSubmit,
             submitting,
+            pristine,
+            invalid,
             fields: {
                 name
             }
@@ -83,6 +87,7 @@ class Form extends React.Component<BaseProps, any> {
                 <Button 
                     type="submit"
                     inputClasses={{'btn-primary': true}}
+                    disabled={submitting || invalid || pristine}
                 >
                     Save changes <Spinner show={submitting} space="left" />
                 </Button>

diff --git a/...omponents/AdminGroupSearch/components/CreateNewAdminGroupForm/CreateNewAdminGroupForm.tsx b/...omponents/AdminGroupSearch/components/CreateNewAdminGroupForm/CreateNewAdminGroupForm.tsx
@@ -21,6 +21,8 @@ interface ReduxFormProps extends BaseProps {
     handleSubmit: (any) => any
     initializeForm: (any) => any
     submitting: boolean
+    invalid: boolean
+    pristine: boolean
 }
 
 const validate = (values) => {
@@ -59,6 +61,8 @@ class Form extends React.Component<BaseProps,any> {
             fields: {
                 name
             },
+            invalid,
+            pristine,
             handleSubmit,
             submitting,
             initializeForm,
@@ -115,6 +119,7 @@ class Form extends React.Component<BaseProps,any> {
                     <Button 
                             type="submit"
                             inputClasses={{'btn-primary': true}}
+                            disabled={submitting || invalid || pristine}
                     >
                         Create new <Spinner show={submitting} space="left" />
                     </Button>
@@ -125,6 +130,7 @@ class Form extends React.Component<BaseProps,any> {
                             type="button"
                             inputClasses={{'btn-default': true}}
                             onClick={onCancel}
+                            disabled={submitting}
                         >
                             Cancel
                         </Button>

diff --git a/src/global/client/pages/admin/components/NameDetailsForm/NameDetailsForm.tsx b/src/global/client/pages/admin/components/NameDetailsForm/NameDetailsForm.tsx
@@ -21,6 +21,8 @@ interface INameDetailsFormProps {
     onSubmit?: (data) => any
     initializeForm?: (data) => any
     error?: string
+    invalid?: boolean
+    pristine?: boolean
 }
 
 const validate = (values) => {
@@ -65,6 +67,8 @@ class Form extends React.Component<INameDetailsFormProps, any> {
                 lastName,
                 middleName,
             },
+            invalid,
+            pristine,
             submitting,
             initializeForm
         } = this.props;
@@ -144,7 +148,7 @@ class Form extends React.Component<INameDetailsFormProps, any> {
 
                     <Button
                         bsStyle="primary"
-                        disabled={submitting}
+                        disabled={submitting || invalid || pristine}
                         type={"submit"}
                     >
                         Save changes <Spinner show={submitting} space="left" />

diff --git a/src/global/client/pages/admin/components/PermissionsForm/PermissionsForm.tsx b/src/global/client/pages/admin/components/PermissionsForm/PermissionsForm.tsx
@@ -13,7 +13,7 @@ import * as _ from 'lodash';
 interface BaseProps {
     initialValues?: {
         permissions: { name: string, active: boolean}[]
-
+        
     }
     onSubmit?: (any) => any
 }
@@ -22,11 +22,19 @@ interface ReduxFormProps extends BaseProps {
     fields: {
         newPermission: any
         permissions: any
+
+        // touched is a hack for deep form arrays.
+        // Possibly upgrade to v6 to resolve.
+        // See: https://github.com/erikras/redux-form/issues/391
+        touched: any 
     }
     submitting: boolean
+    invalid: boolean
+    pristine: boolean
     handleSubmit: (any) => any
     touch: (any) => any
     changeFieldValue: (field, value) => any
+    initializeForm: (any) => any
 }
 
 const validate = (values) => {
@@ -58,13 +66,19 @@ class Form extends React.Component<BaseProps, any> {
 
     render() : React.ReactElement<any> {
         const {
+            initializeForm,
+            initialValues,
             handleSubmit,
             touch,
             changeFieldValue,
             submitting,
+            pristine,
+            invalid,
+            fields,
             fields: {
                 newPermission,
-                permissions
+                permissions,
+                touched
             }
         } = this.props as ReduxFormProps;
 
@@ -81,6 +95,8 @@ class Form extends React.Component<BaseProps, any> {
                                 content: (<span>Permissions updated</span>)
                             }
                         })
+                        changeFieldValue('touched', false);
+
                     })
                     .catch((err) => {
                         this.setState({
@@ -119,9 +135,11 @@ class Form extends React.Component<BaseProps, any> {
                                     inputClasses={{'btn-default': true}}
                                     disabled={submitting || newPermission.pristine || (newPermission.error && newPermission.touched)}
                                     onClick={(e) => {
-                                        touch(['newPermission']);
+
                                         permissions.addField({name: _.trim(_.lowerCase(newPermission.value)), active: true});
                                         changeFieldValue('newPermission', '');
+                                        changeFieldValue('touched', true);
+
 
 
                                     }}
@@ -150,15 +168,25 @@ class Form extends React.Component<BaseProps, any> {
                                     onClick={
                                         (e) => {
                                             changeFieldValue('permissions['+index+'].active', !p.active.value);
-
+                                            changeFieldValue('touched', true);
                                         }
                                     }
                                 >
                                     <i className={ p.active.value ? "fa fa-toggle-on" : "fa fa-toggle-off"}
                                     ></i>
                                 </Button>
 
-                                <Button type="button" inputClasses={{"btn-warning": true}} disabled={submitting} onClick={(e) => {permissions.removeField(index)}}>Remove</Button>
+                                <Button 
+                                    type="button"
+                                    inputClasses={{"btn-warning": true}}
+                                    disabled={submitting}
+                                    onClick={
+                                        (e) => {
+                                            permissions.removeField(index);
+                                            changeFieldValue('touched', true);
+                                        }
+                                    }
+                                >Remove</Button>
 
                             </span>
                         </div>
@@ -167,6 +195,7 @@ class Form extends React.Component<BaseProps, any> {
                 <Button 
                     type="submit"
                     inputClasses={{'btn-primary': true}}
+                    disabled={submitting || !touched.value}
                 >
                     Save changes <Spinner show={submitting} space="left" />
                 </Button>
@@ -178,7 +207,7 @@ class Form extends React.Component<BaseProps, any> {
 export const PermissionsForm = reduxForm(
     {
         form: 'permissionsForm',
-        fields: ['newPermission', 'permissions[].name', 'permissions[].active'],
+        fields: ['newPermission', 'touched', 'permissions[].name', 'permissions[].active'],
         validate,
         returnRejectedSubmitPromise: true
     },

diff --git a/src/global/client/pages/admin/components/StatusDetails/components/StatusDetailsForm.tsx b/src/global/client/pages/admin/components/StatusDetails/components/StatusDetailsForm.tsx
@@ -19,6 +19,8 @@ interface ReduxFormProps extends BaseProps {
         pivot: any
         name: any
     }
+    pristine: boolean
+    invalid: boolean
     submitting: boolean
     initializeForm: (any) => any
     handleSubmit: (any) => any
@@ -47,6 +49,8 @@ class Form extends React.Component<BaseProps, any> {
                 pivot,
                 name
             },
+            invalid,
+            pristine,
             submitting,
             initializeForm,
             handleSubmit
@@ -117,7 +121,7 @@ class Form extends React.Component<BaseProps, any> {
                     <button
                         type="submit"
                         className="btn btn-primary"
-                        disabled={submitting}
+                        disabled={submitting || invalid || pristine}
                     >
                         Save changes
                     </button>

diff --git a/src/global/client/pages/admin/components/UserDetails/UserIdentityForm.tsx b/src/global/client/pages/admin/components/UserDetails/UserIdentityForm.tsx
@@ -12,6 +12,8 @@ import {Glyphicon, Input, Label, MenuItem, Alert} from 'react-bootstrap';
 
 interface ReduxFormProps {
     submitting: boolean
+    invalid: boolean
+    pristine: boolean
     handleSubmit: any
     onSubmit: any
     fields: {
@@ -66,6 +68,8 @@ class UserIdentityForm extends React.Component<any, any> {
                     username,
                     email
                 },
+                invalid,
+                pristine,
                 loading,
                 submitting,
                 handleSubmit
@@ -150,6 +154,7 @@ class UserIdentityForm extends React.Component<any, any> {
                     <Button 
                         type="submit"
                         inputClasses={{'btn-primary': true}}
+                        disabled={invalid || submitting || pristine}
                     >
                         Save changes <Spinner show={submitting} space="left" />
                     </Button>