Validators

required

(value) => ({ required: value === '' });

minLength

(min) => (value) => ({ mixLength: value.length < min });

maxLength

(max) => (value) => ({ maxLength: value.length > max });

minValue

(min) => (value) => ({ minValue: typeof value === 'number' && value < min });

maxValue

(max) => (value) => ({ maxValue: typeof value === 'number' && value > max });

email

(value) => ({ email: !emailRegex.test(value) });

numeric

(value) => ({ numeric: !(typeof value === 'number') });

Custom Validtors

A validator needs to take in a value and return an object with the desired name of the validation for the key and the condition as its key value. { custom: value === 'test' }. This is used for checking the value later and updating the form input and form group. If the key value is true the input will be $invalid, so keep this in mind when designing validations.

const customValidator = (value) => ({ custom: value === 'test' });

A validator can also take variable information needed for the validation (see minLength or the like).

const customValidator = (info) => (value) => ({ custom: value === info });

When setting up an asynchronous validator make sure that the key value is the promise not the object. { custom: Promise }

const asyncValidator = async (value) => {
  if (value === '') return { custom: false }
  return { custom: await fetch('something') }
}