Frontend: Form field error messaging

[domdelorenzo]

Objective

Display error messages on required fields when the fields are blank or invalid

Related components

• client/src/components/DirectoryAddUpdate.jsx
• client/src/components/Input.jsx

Prior behavior:

If a form was submitted without all required fields,

1. the json error response would be set in state on DirectoryAddUpdate.jsx and
2. each Input component would parse the error json, find error keys that matched the input name, and display the associated message in red below the input. For example:
   • if the entityTypes input was empty, the the error object would be passed to each input
   • the Input with the property name=entityTypes would match the key entityTypes from the error object to it's own name property (const errorsArr = _.get(props.errors, props.name);
   • the errorArr would have a truthy value, and reveal a FormControl div containing the error message from the object

     {errorsArr && (
     <FormControl.Feedback type="invalid">
       {errorsArr.map((error, index) => (
         <div
           key={`field-error-${props.name}-${index}`}
           className="fieldError"
         >
           {error}
         </div>
       ))}
     </FormControl.Feedback>
     )}

Current behavior:

• form errors no longer display because the structure of the data model and the associated error response has changed and no longer neatly maps on to a single key (e.g. instead of people mapping to an array of error messages for a single person, it maps to an array of people values which could each have their own array of error messages)
• here's an example of the error response from the server:

{
  "coop": {
    "contact_methods": [
      {
        "phone": [
          "The phone number entered is not valid."
        ]
      }
    ],
    "people": [
      {
        "first_name": [
          "This field may not be blank."
        ],
        "last_name": [
          "This field may not be blank."
        ],
        "contact_methods": [
          {
            "non_field_errors": [
              "Either an email or a phone number must be provided."
            ]
          }
        ]
      }
    ],
    "addresses": [
      {
        "address": {
          "county": [
            "This field may not be blank."
          ]
        }
      }
    ],
    "description": [
      "This field may not be blank."
    ],
    "tags": [
      "This field may not be blank."
    ]
  }
}

Suggestions

• refactor the requiredFields list on DirectoryAddUpdate to include additional values (this will need to be done anyway because there are more required fields in the model now)
• Maybe look into utilizing the data-index and/or data-parent properties on each Input field to select each field with greater specificity (e.g. if there are multiple person records and the error is on the second record, we want to be able to pick out the second person input field to display the error message)