fix: onChange/onToggle in constructor

CHANGELOG.md

@@ -15,6 +15,7 @@
 * Introduced `files` Field prop.
 * Introduced `resetting` && `clearing` computed.
 * Dropzone support.
+* Ability to pass `onChange` & `onToggle` in constructor.
 
 # 1.30
 * New `onClear` & `onReset` Form & Fields Hooks.

src/Field.js

@@ -30,6 +30,8 @@ export default class Field extends Base {
   $observers;
   $interceptors;
 
+  $onChange;
+  $onToggle;
   $onDrop;
   $onSubmit;
   $onClear;
@@ -294,8 +296,13 @@ export default class Field extends Base {
     this.value = e;
   });
 
-  onChange = this.sync;
-  onToggle = this.sync;
+  onChange = (...all) => this.$onChange
+    ? this.$onChange.apply(this, [this]).apply(this, [...all])
+    : this.sync.apply(this, [...all]);
+
+  onToggle = (...all) => this.$onToggle
+    ? this.$onToggle.apply(this, [this]).apply(this, [...all])
+    : this.sync.apply(this, [...all]);
 
   onDrop = action((...all) => {
     const e = all[0];
@@ -351,8 +358,10 @@ export const prototypes = {
       $format,
       $observers,
       $interceptors,
-      $onDrop,
+      $onChange,
+      $onToggle,
       $onSubmit,
+      $onDrop,
       $onClear,
       $onReset,
     } = $props;
@@ -378,16 +387,20 @@ export const prototypes = {
         format,
         observers,
         interceptors,
-        onDrop,
+        onChange,
+        onToggle,
         onSubmit,
+        onDrop,
         onClear,
         onReset,
       } = $data;
 
       this.type = $type || type || 'text';
       this.$onSubmit = $onSubmit || onSubmit || null;
-      this.$onClear = $onClear || onClear || this.noop;
+      this.$onChange = $onChange || onChange || null;
+      this.$onToggle = $onToggle || onToggle || null;
       this.$onDrop = $onDrop || onDrop || this.noop;
+      this.$onClear = $onClear || onClear || this.noop;
       this.$onReset = $onReset || onReset || this.noop;
 
       this.$parser = $try($parse, parse, this.$parser);
@@ -422,15 +435,22 @@ export const prototypes = {
       this.$interceptors = $interceptors || interceptors || null;
       this.$extra = $extra || extra || null;
       this.$options = $options || options || {};
+
+
+      if (this.state.form.name === 'Register Material') {
+        console.log(this.name, this.$onChange);
+      }
       return;
     }
 
     /* The field IS the value here */
     this.name = _.toString($key);
     this.type = $type || 'text';
+    this.$onChange = $onChange || null;
+    this.$onToggle = $onToggle || null;
     this.$onSubmit = $onSubmit || null;
-    this.$onClear = $onClear || this.noop;
     this.$onDrop = $onDrop || this.noop;
+    this.$onClear = $onClear || this.noop;
     this.$onReset = $onReset || this.noop;
 
     this.$parser = $try($parse, this.$parser);

src/shared/Initializer.js

@@ -44,6 +44,8 @@ export default {
       $rules: $try('rules'),
       $observers: $try('observers'),
       $interceptors: $try('interceptors'),
+      $onChange: $try('onChange'),
+      $onToggle: $try('onToggle'),
       $onDrop: $try('onDrop'),
       $onSubmit: $try('onSubmit'),
       $onReset: $try('onReset'),

src/utils.js

@@ -5,7 +5,7 @@ const props = {
   field: ['value', 'initial', 'default', 'label', 'placeholder', 'disabled', 'related', 'options', 'extra', 'bindings', 'type', 'error'],
   separated: ['values', 'initials', 'defaults', 'labels', 'placeholders', 'disabled', 'related', 'options', 'extra', 'bindings', 'types'],
   function: ['observers', 'interceptors', 'parse', 'format'],
-  hooks: ['onDrop', 'onSubmit', 'onReset', 'onClear'],
+  hooks: ['onChange', 'onToggle', 'onDrop', 'onSubmit', 'onReset', 'onClear'],
   validation: ['rules', 'validators'],
   types: {
     isDirty: 'some',