Heading

• Form Component

• @param - props

• props contain a field

• sample props

const field = [{

//Example Configuration for input type text box
  key: "userName",

  component: "input",

  fieldName: "User Name",

  id:"name",

  bindingKey: "userName",

  type: "text",

  onChange: () => {--onchange method--},

  disabled: false,

  value: "Srinivasan",

  defaultValidation: true,

  isCustomValidationNeeded: false,

  customValidation: () => {--any customValidation method--}

  validation: {

   min: 5,

   max: 12,
 
  required: true,

  isEmail: false,

 },

  message: {

   min: "User Name must contain a minimum of 5 characters",

   max: "User Name should be within 12 characters",

   required: "User Name should not be empty",

   customValidationErrorMessage : "Address custom validation method"

 },

},
{

  key: "delete",

  component: "button",

  name : "Delete",

  disabled: false,

  className: //css class for button component,

  isPrimary: true,

  onClick : () => {-any method for onClick--},

}
}];

Problem Statement:

 To create a form as a generic component

Event-1:

 onLoad

Jobs to be done:

  Destructure the props.
  create a Form.

Implementation plan:

Destructure the props

1. In the render() method destructure props as field

Create a Form

1. In render()
   • Map each fieldConfig in the field to a respective HTML element using map()
   • And Invoke onFieldValue() and pass fieldConfig as an argument to it
2. In onFieldValue(fieldConfig)
   • Get component from fieldConfig
   • Using component, set configuration from fieldConfig to a respective HTML element using switch case
   • And return that HTML element
   • Import Input, DropDown, Button component files

• If the component is input, then set configurations to input

Sample fieldConfig for input component

<Input 
  id={fieldConfig.bindingKey}
  type={fieldConfig.type} 
  fieldName={fieldConfig.fieldName}
  disabled={fieldConfig.disabled ? "disabled": ""}
  onChange={(event) => {validateForm(event, fieldConfig)}}
  value={fieldConfig.value}
/>

  1.{error[fieldConfig.bindingKey]}
  2.The element will display an error message for each input's value
  3.Maintained error in the state for each input

• If the component is a dropDown, then set configurations to dropDown component

Sample fieldConfig for dropDown component

<DropDown 
  option={fieldConfig.options}
  value={fieldConfig.value}
  onChange = {fieldConfig.onChange}
  id={fieldConfig.bindingKey}
  isPlaceholderHidden={fieldConfig.isPlaceholderHidden}
/>

• If the component is a button, then set configurations to button component

Sample fieldConfig for button component

<Button 
  name = {fieldConfig.name}
  disabled = {fieldConfig.disabled}
  className={fieldConfig.className}
  isPrimary={fieldConfig.isPrimary}
  onClickFunction= {fieldConfig.onClick}
/>

Event-2:

On Change

Jobs to be Done:

  Get value
  Validate Value

Implementation:

1. In validateValue(event, currentFieldConfig),

• Declare a const variable store state of error in it
• Declare a const variable store current value in it
• Check various scenario for default validation
  • If defaultValidation is not true and customValidation is true
  • And if custom validation method returns false, then set custom validation error message from currentFieldConfig to error in the state
  • If defaultValidation is not true and customValidation is not true
  • Then, invoke just invoke on change event of the current field and pass event and error object of current event
• Check if the current field is required, if required is true then check the length
• If length is zero, then set error message from fieldConfig to error
• Then check min and max with data provided in fieldConfig
• If current values do not match with min and max condition then set error message in error
• Also check value isEmail or not, then it does not matches the given pattern then set error to it
• Also invoke custom validation method for a current event, if isCustomValidation is needed
• And also check whether custom validation return to set error
• If true, then set error else set error for the current event as an empty string value