Могу ли я выполнить проверку всей формы с помощью команды antd вactjs? - PullRequest
Новая
       34

Могу ли я выполнить проверку всей формы с помощью команды antd вactjs?

0 голосов
/ 11 июня 2019

Я пытаюсь установить ошибку в целом форме входа в систему и как единое целое; Я не хочу ошибок на поле.

Вот моя попытка, которая выдает ошибку: 

                <Form
                    layout="inline"
                    onSubmit={this.onSubmit}
                    {...error && {
                        help: error.detail,
                        validateStatus: 'error',
                    }}
                >

Ошибка React does not recognize the `validateStatus` prop on a DOM element.

Вот предложенное мной «решение», которое работает так, как я хочу: оно выделяет все поля, но отображает одно сообщение всей формы для моей ошибки. 

            <div className="Login">
                <Form
                    layout="inline"
                    onSubmit={this.onSubmit}
                    {...error && {
                        className: 'has-error',
                    }}
                >
                    // This here is the form-wide error
                    {error && (
                        <div className="ant-form-explain">{error.detail}</div>
                    )}
                    // Using validateStatus on each field to set the red color,
                    // but give no message
                    <Form.Item
                        validateStatus={emailError || error ? 'error' : ''}
                        help={emailError || ''}
                    >
                        {getFieldDecorator('email', {
                            rules: [
                                {
                                    required: true,
                                    message: 'Please enter your email address.',
                                },
                            ],
                        })(
                            <Input
                                prefix={
                                    <Icon
                                        type="email"
                                        style={{ color: 'rgba(0,0,0,.25)' }}
                                    />
                                }
                                placeholder="me@me.com"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item
                        validateStatus={passwordError || error ? 'error' : ''}
                        help={passwordError || ''}
                    >
                        {getFieldDecorator('password', {
                            rules: [
                                {
                                    required: true,
                                    message: 'Please enter your password.',
                                },
                            ],
                        })(
                            <Input
                                prefix={
                                    <Icon
                                        type="lock"
                                        style={{ color: 'rgba(0,0,0,.25)' }}
                                    />
                                }
                                type="password"
                                placeholder="abc123"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button
                            type="primary"
                            htmlType="submit"
                            disabled={hasErrors(getFieldsError())}
                        >
                            Log in
                        </Button>
                    </Form.Item>
                </Form>
            </div>

Есть ли более элегантный способ сделать это в antd?

...