Блог

Задача заключается в следующем, при нажатии кнопки ВХОДА на сервер отправляется запрос с паролем и логином, если они неверны, то под строкой ввода пароля нужно отобразить соответствующую ошибку и все поля ввода должны быть выделены красным цветом. Как вы можете этого достичь?

Я очень долго пытался это сделать, используя встроенные валидаторы в форме.Предмет. Итак, поскольку мне не нужно беспокоиться об изменении цвета полей ввода, валидатор делает это сам, но я запутался в этих валидаторах, и у меня получился бесконечный цикл.

Вот часть кода для страницы входа в систему.

 export const LoginPage = () => {
  const { dispatch } = useAuthContext()

  const onFinish = (values: any) => {
    APIs.requestLogin(values.username, values.password, false)
      .then((response: any) => {
        dispatch({ type: SIGN_IN, payload: response.data })
      })
      .catch(() => {
        console.log('error')
      })
  }

  return (
    <div className={classes.root}>
      <div className={classes.container}>
        <Form
          className={classes.form_container}
          name="normal_login"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            className={classes.form_input}
            name="username"
            rules={[{ required: true, message: 'Please enter your username!' }]}
          >
            <Input
              autoFocus={true}
              className={classes.input_style}
              placeholder="Username"
              prefix={<UserOutlined className="site-form-item-icon" />}
            />
          </Form.Item>

          <Form.Item
            className={classes.form_input}
            name="password"
            rules={[{ required: true, message: 'Please enter your password!' }]}
          >
            <Input.Password className={classes.input_style} placeholder="Password" prefix={<LockOutlined />} />
          </Form.Item>

          <Form.Item className={classes.form_submit}>
            <Button className={classes.form_button_submit} type="primary" htmlType="submit">
              LOGIN
            </Button>
          </Form.Item>
        </Form>
        <div className={classes.image} />
      </div>
    </div>
  )
}