我正在使用React + Redux,以及redux-form来进行表单处理和验证。到目前为止,使用起来非常简单,我可以轻松地使用field.touched和field.error来检查单个表单字段的验证状态,但是我似乎找不到任何方法或属性来告诉我整个表单是否存在任何错误。因为React的工作方式,任何表单一旦加载就会生成一堆错误,这就是为什么需要使用field.touched来测试单个字段的原因。
我希望能够在整个表单中有任何错误时显示一些通用的标记,但只显示一次。所以,我真的希望有像form.touched和form.error这样的东西。我心中有一个辅助函数的设计,它将检查表单中的所有字段并返回一个布尔值,但如果可能的话,我更愿意避免这样做。
更新: 根据Andy_D的答案,我已经更新了我的代码,使用了表单级别的属性dirty和invalid,但是dirty似乎没有正确更新。在提交表单并看到单个字段级别的错误后,表单仍然显示dirty:false。
以下是我的代码的简化版本以及提交表单后this.props对象的内容。
提交后的this.props:
我希望能够在整个表单中有任何错误时显示一些通用的标记,但只显示一次。所以,我真的希望有像form.touched和form.error这样的东西。我心中有一个辅助函数的设计,它将检查表单中的所有字段并返回一个布尔值,但如果可能的话,我更愿意避免这样做。
更新: 根据Andy_D的答案,我已经更新了我的代码,使用了表单级别的属性dirty和invalid,但是dirty似乎没有正确更新。在提交表单并看到单个字段级别的错误后,表单仍然显示dirty:false。
以下是我的代码的简化版本以及提交表单后this.props对象的内容。
import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { makeBooking } from '../actions/index';
class PaymentBooking extends Component {
render() {
const { fields: { school }, handleSubmit } = this.props;
return (
<form className="form-horizontal" onSubmit={handleSubmit(this.props.makeBooking)}>
{
console.log(this)
}
{
this.props.dirty && this.props.invalid ? <div className="alert alert-danger" role="alert">Test error wrapper</div> : ''
}
<h2>Make a New Payment Booking</h2>
<div className="panel panel-default">
<div className="panel-heading">Payment Information</div>
<div className="panel-body">
<div className={`form-group ${school.touched && school.invalid ? 'has-error' : ''}`}>
<label htmlFor="school" className="col-lg-2 control-label">Your School</label>
<div className="col-lg-10">
<select name="school" className="form-control" {...school}>
<option value="MIT">MIT</option>
<option value="Stanford">Stanford</option>
<option value="Arizona">Arizona</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div className="form-submit">
<button type="submit" className="btn btn-primary">Book a Payment</button>
</div>
</form>
);
}
}
function validate(values) {
const errors = {};
if (!values.school)
errors.school = 'School is a required field';
return errors;
}
export default reduxForm({
form: 'PaymentBookingForm',
fields: ['school'],
validate
}, null, {makeBooking})(PaymentBooking);
提交后的this.props:
{
"readonly": false,
"asyncValidating": false,
"dirty": false,
"errors": {
"school": "School is a required field"
},
"fields": {
"school": {
"name": "school",
"defaultChecked": false,
"valid": false,
"invalid": true,
"dirty": false,
"pristine": true,
"error": "School is a required field",
"active": false,
"touched": true,
"visited": false
}
},
"invalid": true,
"pristine": true,
"submitting": false,
"submitFailed": true,
"valid": false,
"values": {}
}
submitFailed
- 编辑答案。 - Andy_DhandleSubmit()
函数的工作是在表单无效时阻止其提交?不管怎样,我已经更新了代码以使用submitFailed
,这很有效,但我会记住你有关禁用提交按钮的建议,以备将来参考。谢谢。 - T Nguyen