Field errors.

silviogutierrez · Jul 7, 2018 · 42819cf · 42819cf
1 parent 8bf2617
commit 42819cf
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/components/Form.tsx b/components/Form.tsx
@@ -3,14 +3,16 @@ import React from 'react';
 import {Widget, WidgetType} from './Widget';
 
 interface Field {
+    name: string;
+    label: string;
     widget: WidgetType;
 }
 
 type FormError = string[];
 
 export type FormType = {
     errors: {
-        [name: string]: FormError;
+        [name: string]: FormError|null;
     };
     fields: Field[];
 }
@@ -23,12 +25,22 @@ interface Props {
 export const Form = (props: Props) => {
     return <form method="POST" action="">
         <input type="hidden" name="csrfmiddlewaretoken" value={props.csrf_token} />
-        {Object.keys(props.form.errors).length > 0 &&
+        {/*Object.keys(props.form.errors).length > 0 &&
         <pre>{JSON.stringify(props.form.errors, null, 2)}</pre>
-        }
+        */}
         {props.form.fields.map(field =>
         <div key={field.widget.name}>
-            <Widget widget={field.widget} />
+            <label>
+                {field.label}
+                <Widget widget={field.widget} />
+            </label>
+            {props.form.errors[field.name] != null &&
+            <ul>
+                {props.form.errors[field.name]!.map((error, index) =>
+                <li key={index}>{error}</li>
+                )}
+            </ul>
+            }
         </div>
         )}
         <button type="submit">Submit</button>

diff --git a/server/db.sqlite3 b/server/db.sqlite3
diff --git a/server/server/views.py b/server/server/views.py
@@ -55,7 +55,13 @@ class Meta:
 
     serialized_form = {
         'errors': form.errors,
-        'fields': [simplejson.loads(str(field)) for field in form],
+        'fields': [
+            {
+                **simplejson.loads(str(field)),
+                'name': field.name,
+                'label': field.label,
+            } for field in form
+        ],
     }
 
     response = JSXResponse(