Chapter 3 Complete.

api/src/services/contacts/contacts.js

@@ -1,3 +1,4 @@
+import { validate } from '@redwoodjs/api'
 import { db } from 'src/lib/db'
 
 export const contacts = () => {
@@ -11,6 +12,7 @@ export const contact = ({ id }) => {
 }
 
 export const createContact = ({ input }) => {
+  validate(input.email, 'email', { email: true })
   return db.contact.create({
     data: input,
   })

web/src/pages/ContactPage/ContactPage.js

@@ -3,10 +3,12 @@ import { toast, Toaster } from '@redwoodjs/web/toast'
 import {
   FieldError,
   Form,
+  FormError,
   Label,
-  TextField,
   Submit,
   TextAreaField,
+  TextField,
+  useForm,
 } from '@redwoodjs/forms'
 
 const CREATE_CONTACT = gql`
@@ -18,9 +20,11 @@ const CREATE_CONTACT = gql`
 `
 
 const ContactPage = () => {
+  const formMethods = useForm({ mode: 'onBlur' })
   const [create, { loading, error }] = useMutation(CREATE_CONTACT, {
     onCompleted: () => {
       toast.success('Thank you for your submission!')
+      formMethods.reset()
     },
   })
 
@@ -33,7 +37,8 @@ const ContactPage = () => {
       <MetaTags title="Contact" description="Contact page" />
 
       <Toaster />
-      <Form onSubmit={onSubmit} config={{ mode: 'onBlur' }}>
+      <Form onSubmit={onSubmit} error={error} formMethods={formMethods}>
+        <FormError error={error} wrapperClassName="form-error" />
         <Label name="name" errorClassName="error">
           Name
         </Label>