Learn React with TypeScript 3

Adding a validation rules prop to form

Let's think about how we would want to specify validation rules to a form. We need to be able to specify one or more rules for a field. Some rules could have a parameter, such as a minimum length. It would be nice if we could specify the rules, as in the example that follows:

<Form  ...  validationRules={{    email: { validator: required },    name: [{ validator: required }, { validator: minLength, arg: 3 }]  }}>  ...</Form>

Let's have a go at implementing the validationRules prop on the Form component:

1. Start by defining a type for the Validator function in Form.tsx:

export type Validator = (  fieldName: string,  values: IValues,  args?: any) => string;

A Validator function will take in the field name, the values ...