验证异步多个字段的Redux形式

时间:2019-02-14 03:59:58

标签: reactjs redux redux-form

我正在尝试使用我的express-app验证用户名和电子邮件,但是在asyncValidate方法上,当我验证其中一个时,另一个错误状态消失了。

const asyncValidate = (values, dispatch, props, field) => {
    if (field === 'username') {
        const url = config.dev_api_url + `/validation/username/${values.username}`
        return axios.get(url).then(res => {
            if (res.data.username === true) {
                throw { username: 'Already exists' }
            }
        })
    } else if (field === 'email') {
        const url = config.dev_api_url + `/validation/email/${values.email}`
        return axios.get(url).then(res => {
            if (res.data.email === true) {
                throw { email: 'Already exists' }
            }
        })
    }
}

这是我呈现输入错误的函数。

renderInput = form => {
    let fieldClasses = 'field fluid'
    let inputClasses = 'ui fluid input '
    let messageType = ''
    let messageContent = ''
    let iconType = ''
    if (form.meta.error && form.meta.touched) {
        messageType = 'error'
        messageContent = form.meta.error
        fieldClasses += ' error'
        inputClasses += ' icon'
        iconType = 'error'
        if (form.meta.error === 'password_error') {
            messageContent = (
                <em>
                    <b>1 Uppercase</b> letter <br />
                    <b>1 Lowercase</b> letter <br />
                    <b>1 Number</b> <br />
                    At least <b>8 characters</b> long <br />
                </em>
            )
        }
    } else if (form.meta.touched) {
        inputClasses += ' icon'
        iconType = 'success'
    }
    return (
        <div className={fieldClasses}>
            <label>{form.label}</label>
            <div className={inputClasses}>
                <input {...form.input} autoComplete="off" type={form.type} placeholder={form.placeholder} />
                {this.renderIcon(iconType)}
            </div>
            {this.renderMessage(messageType, messageContent)}
        </div>
    )
}

当我抛出一个新错误时,另一个错误消失了。这是一些图片。

img1

img2

img3

2 个答案:

答案 0 :(得分:1)

我发现这样做的方法不太脏-万一有人需要使用redux-form:

class SingleItemAPIView(generics.ListAPIView):
    serializer_class = ItemSerializer

    def get_queryset(self):
        item = self.kwargs['pk']
        queryset = Item.objects.filter(pk=item)
        return queryset

答案 1 :(得分:0)

这会很简短。

使用Redux-Form这样做很麻烦,所以我最好使用Formik,它更轻巧,并且可以处理必要的事情,除非您需要redux-form的某些功能,否则这就是方法。

https://jaredpalmer.com/formik/docs/overview