Set fields touched before calling submit callback (#62)

* Added TouchFields() method in FormStore.

* Updated actions. Added emit action in method TouchFields.

Author: DovydasNavickas

packages/simplr-forms-dom/src/components/form.tsx

@@ -27,16 +27,16 @@ export class Form extends BaseForm<FormProps, {}> {
             return;
         }
 
-        // TODO: Touch all fields to validate
+        this.FormStore.TouchFields();
 
         if (this.props.onSubmit == null) {
             return;
         }
 
-        // Persist synthetic event, because it's passed into another method
+        // Persist synthetic event, because it's passed into another method.
         event.persist();
 
-        // Pass onSubmit result to FormStore for further processing
+        // Pass onSubmit result to FormStore for further processing.
         const result = this.props.onSubmit(event, this.FormStore);
         this.FormStore.SubmitForm(result);
     }

packages/simplr-forms/src/actions/form-store.ts

@@ -10,18 +10,20 @@ export abstract class FormAction {
     }
 }
 
-export class StateChanged extends FormAction { }
-
-export class FieldRegistered extends FormAction {
-    constructor(protected formId: string, private fieldId: string) {
+export abstract class FieldAction extends FormAction {
+    constructor(formId: string, protected fieldId: string) {
         super(formId);
     }
 
-    public get FieldId(): string {
+    public get FieldId() {
         return this.fieldId;
     }
 }
 
+export class StateChanged extends FormAction { }
+
+export class FieldRegistered extends FieldAction { }
+
 export class FieldsGroupRegistered extends FormAction {
     constructor(protected formId: string, private fieldsGroupId: string) {
         super(formId);
@@ -42,36 +44,14 @@ export class FieldsArrayRegistered extends FormAction {
     }
 }
 
-export class ValueChanged extends FormAction {
-    constructor(protected formId: string, private fieldId: string) {
-        super(formId);
-    }
-
-    public get FieldId(): string {
-        return this.fieldId;
-    }
-}
-
-export class FieldPropsChanged extends FormAction {
-    constructor(protected formId: string, private fieldId: string) {
-        super(formId);
-    }
+export class ValueChanged extends FieldAction { }
 
-    public get FieldId(): string {
-        return this.fieldId;
-    }
-}
+export class FieldPropsChanged extends FieldAction { }
 
 export class FormPropsChanged extends FormAction { }
 
-export class FormDisabled extends FormAction {
-    constructor(protected formId: string) {
-        super(formId);
-    }
-}
+export class FormDisabled extends FormAction { }
 
-export class FormEnabled extends FormAction {
-    constructor(protected formId: string) {
-        super(formId);
-    }
-}
+export class FormEnabled extends FormAction { }
+
+export class FieldTouched extends FieldAction { }

packages/simplr-forms/src/stores/form-store.ts

@@ -379,6 +379,31 @@ export class FormStore extends ActionEmitter {
         }
     }
 
+    public TouchFields(fieldsIds?: string[]): void {
+        if (fieldsIds == null) {
+            fieldsIds = this.state.Fields.keySeq().toArray();
+        }
+
+        this.State = this.State.withMutations(state => {
+
+            fieldsIds!.forEach(fieldId => {
+                const fieldState = state.Fields.get(fieldId);
+
+                if (fieldState != null) {
+                    state.Fields = state.Fields.set(fieldId, fieldState.merge({
+                        Touched: true
+                    } as FieldStoreState));
+                }
+            });
+
+            return this.RecalculateDependentFormStatuses(state);
+        });
+
+        fieldsIds.forEach(fieldId => {
+            this.emit(new Actions.FieldTouched(this.FormId, fieldId));
+        });
+    }
+
     public async ValidateForm(validationPromise: Promise<never>): Promise<void> {
         const form = this.State.Form;