[英]Redux form with react and validators
I m using redux form for the first time and I m having some troubles dealing with synchronous validators. 我第一次使用redux表单,在处理同步验证器时遇到一些麻烦。
Actually, I m having the following component : 实际上,我具有以下组成部分:
import React, {Component, PropTypes} from 'react';
import {Field} from 'redux-form';
/**
* The SignupForm class definition
*/
export default class SignupForm extends Component {
/**
* The SignupForm props type
*/
static propTypes = {
handleSubmit: PropTypes.func,
}
/**
* Render the SignupForm
*/
render() {
console.log(this.props); // nothing available concerning the error
const {
handleSubmit
} = this.props;
return (
<form onSubmit={handleSubmit}>
<Field name="email" component="input" required placeholder="Email" type="text"/>
<Field name="emailConfirmation" component="input" required placeholder="Confirm your email" type="text"/>
<Field name="password" component="input" required placeholder="Password" type="password"/>
<Field name="passwordConfirmation" component="input" required placeholder="Confirm your password" type="password"/>
<button type="submit" className="signup">Signup</button>
</form>
);
}
}
And the following validator : 和以下验证器:
export default ({email, emailConfirmation}) => {
const errors = {
email: null
};
if (email !== emailConfirmation) {
errors.email = 'The two email addresses are not the same';
}
console.log(errors); // the error is here
return errors;
};
And map both the redux form and the validator using the reduxForm function : 并使用reduxForm函数映射redux表单和验证器:
import SignupForm from './../../components/signupForm/signupForm';
import validate from './signupForm.validators';
import {reduxForm} from 'redux-form';
export default reduxForm({
form: 'signup',
validate
})(SignupForm);
My problem 我的问题
When I console.log inside of my validator the errors object on the return statement, I m well having my error telling that my email addresses are not the same. 当我在验证器内console.log返回语句中的errors对象时,我很容易出错,告诉我我的电子邮件地址不相同。
But when I console.log this.props in my component, I can see an object with some redux-form properties and methods, but the error object is undefined. 但是,当我在组件中console.log this.props时,我可以看到一个具有一些redux形式的属性和方法的对象,但是错误对象是未定义的。
I m probably making the things wrong, but I can't get how and why. 我可能把事情弄错了,但我不知道怎么做和为什么做。
Any help ? 有什么帮助吗?
When your validate function its called, you are creating an object "errors" and returning it, so redux-form will use that to inject to corresponding fields the errors. 当您的validate函数被调用时,您正在创建一个对象“错误”并返回它,因此redux-form将使用该对象将错误注入到相应的字段中。
in your case: your Field "email" should get in props: meta: {error: 'The two email addresses are not the same'} 在您的情况下:您的字段“电子邮件”应包含以下属性:meta:{错误:“两个电子邮件地址不同”}
Are you sure this is not happenning? 您确定这没有发生吗?
Did you check official docs sample? 您检查官方文档样本了吗?
According to Field docs I understand you can only get to it at Field level 根据Field文档,我了解您只能在Field级别上了解
meta.error : String [optional]
meta.error:字符串[可选]
The error for this field if its value is not passing validation.
如果该字段的值未通过验证,则为错误。 Both synchronous, asynchronous, and submit validation errors will be reported here .
同步,异步和提交验证错误都将在此处报告 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.