Function SetError

app/src/setError.tsx:15–117

()

};

const SetError: React.FC = () => {
  const {
    register,
    setError,
    clearErrors,
    formState: { errors },
  } = useForm<FormInputs>();

  useEffect(() => {
    register('firstName');
    register('lastName');
    register('age');
    register('test');
    register('test1');
    register('username');
    register('test2');

    setError('firstName', { type: 'wrong' });
    setError('lastName', { type: 'wrong' });
    setError('age', { type: 'wrong' });
    setError('test', { type: 'test', message: 'testMessage' });
    [
      {
        type: 'required',
        name: 'test1',
        message: 'This is required.',
      },
      {
        type: 'minLength',
        name: 'test2',
        message: 'Minlength is 10',
      },
    ].forEach(({ name, type, message }) =>
      setError(name as FieldPath<FormInputs>, { type, message }),
    );
    setError('username', {
      types: {
        required: 'This is required',
        minLength: 'This is minLength',
      },
    });
  }, [register, setError]);

  return (
    <div>
      <p id="error">
        {errors.test && errors.test.message}
        {errors.test1 && errors.test1.message}
        {errors.test2 && errors.test2.message}
        {errors.username &&
          errors.username.types &&
          errors.username.types.required}
        {errors.username &&
          errors.username.types &&
          errors.username.types.minLength}
      </p>

      <div id="errorContainer">