Added support for displaying custom messages in <Errors> component (WIP)

Author: davidkpiano

src/components/errors-component.js

@@ -8,24 +8,28 @@ import isArray from 'lodash/isArray';
 
 import { getFieldFromState } from '../utils';
 
-function createErrorComponent(component, message, key) {
+function createErrorComponent(component, message, modelValue, key) {
+  const messageString = typeof message === 'function'
+    ? message(modelValue)
+    : message;
+
   return React.createElement(
     component,
     { key },
-    message);
+    messageString);
 }
 
-function mapErrorMessages(errors, messages, component) {
+function mapErrorMessages(errors, messages, modelValue, component) {
   return compact(map(errors, (error, key) => {
     const message = messages[key];
 
     if (error) {
       if (message) {
-        return createErrorComponent(component, message, key);
+        return createErrorComponent(component, message, modelValue, key);
       } else if (typeof error === 'string') {
-        return createErrorComponent(component, error, key);
+        return createErrorComponent(component, error, modelValue, key);
       } else if (typeof error === 'object') {
-        return mapErrorMessages(error, messages, component);
+        return mapErrorMessages(error, messages, modelValue, component);
       }
     }
 
@@ -55,7 +59,7 @@ class Errors extends Component {
   render() {
     const {
       // model,
-      // modelValue,
+      modelValue,
       fieldValue,
       fieldValue: {
         valid,
@@ -73,7 +77,7 @@ class Errors extends Component {
 
     const errorMessages = valid
       ? null
-      : mapErrorMessages(errors, messages, component);
+      : mapErrorMessages(errors, messages, modelValue, component);
 
     return React.createElement(
       wrapper,

test/errors-component-spec.js

@@ -117,6 +117,46 @@ describe('<Errors />', () => {
     });
   });
 
+  describe('displaying custom messages', () => {
+    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+      testForm: formReducer('test', {}),
+      test: modelReducer('test'),
+    }));
+
+    const form = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <form>
+          <Errors model="test.foo" 
+            messages={{
+              length: (val) => `${val && val.length} chars is too short`,
+            }}
+          />
+          <Field model="test.foo"
+            validators={{
+              length: (v) => v && v.length && v.length > 5,
+            }}
+          >
+            <input type="text" />
+          </Field>
+        </form>
+      </Provider>
+    );
+
+    const input = TestUtils.findRenderedDOMComponentWithTag(form, 'input');
+
+    it('should return messages from functions called with the model value', () => {    
+      input.value = 'four';
+
+      TestUtils.Simulate.change(input);
+
+      const errors = TestUtils.scryRenderedDOMComponentsWithTag(form, 'span');
+
+      assert.lengthOf(errors, 1);
+
+      assert.equal(errors[0].innerHTML, '4 chars is too short');
+    });
+  });
+
   describe('the "show" prop', () => {
     function renderErrorsWithShow(show) {
       const store = applyMiddleware(thunk)(createStore)(combineReducers({