How can I output my own error in the form of antd?

Viewed 46

I do the registration using React and Antd. When the backend sends the error "user already registered", after click "Sign up" you need to display it in the form.

Something like here or something else but where i input username and both passwords:

enter image description here

The response from the server that comes, but I can do it differently:

{
    "errorCode": "1",
    "errorMessage": "user already registered"
}

Code:

    class RegisterPage extends React.Component {

    // Method in which I send the request
    signUp(values) {
        fetch("http://localhost:8080/sign-up", {
            method: "POST",
            body: JSON.stringify({"username": values.username, "password": values.password})
        }).then(response => response.json())
            .then(response => {console.log(response)
            })
    }

    render() {
        return (
            <>
                <Header/>
                <div className="container">
                </div>
                <Row type="flex" justify="center" align="middle" style={{minHeight: '80vh'}}>
                    <Form

                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={this.signUp}
                    >
                        <Form.Item className="username-input"
                                   name="username"
                                   rules={[
                                       {
                                           required: true,
                                           message: 'This user already registered!',
                                       }
                                   ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="Username"/>
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                    min: 1,
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon"/>}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>
                        <Form.Item
                            name="confirm_password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please confirm your password!',
                                },
                                ({getFieldValue}) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('Passwords don\'t match!'));
                                    },
                                }),
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon"/>}
                                type="password"
                                placeholder="Confirm password"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button"
                                    style={{width: "100%"}}>
                                Sign Up
                            </Button>
                        </Form.Item>
                    </Form>
                </Row>
                <PageFooter/>
            </>
        )
    }
}
1 Answers

You can just modified the message value of the field in the form.

<Form.Item className="username-input"
         name="username"
         rules={[
          {
          required: true,
          // you can give custorm error message in the below message field.
          message: 'user already registered',
          }
          ]}
          >
         <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="Username"/>
          </Form.Item>
Related