reactjs - Redux 表单动态字段级别验证

Question

我有一个动态表单字段，根据表单所选字段的值需要该字段。即，如果某个字段的值为"is"，则注释框是必需的，如果为“否”，则不需要。

如果我最初选择"is"并触摸并模糊评论字段，验证将返回所需的错误。但是，如果我切换到“否”并返回"is"，则验证错误不再发生。如果我在评论框中输入内容并删除，验证将再次发生。

我正在使用字段级验证，并且还使用同步验证来解决相同的问题。

<Field name={`${fieldId}.comment`}  validate={condition.required ? [required] : []} label={condition.label} className="form-control" component={renderTextField} />

Where 条件是检查该字段是否为必填字段。

逻辑是正确的，因为验证工作在初始选择上，并且如果您填写注释字段并删除文本，但它似乎没有收到验证错误。

提前致谢

Answer 1

引自the Redux-Form Field component docs (v 6.8.0) :

validate : (value, allValues, props) => error [optional]

Allows you to to provide a field-level validation rule. The function will be given the current value of the field, all the other form values, and any props passed to the form. If the field is valid, it should return undefined, if the field is invalid, it should return an error (usually, but not necessarily, a String).

您尝试将错误值直接传递到 Field 中，但 validate 属性旨在接受用于确定有效性的验证函数。你应该做这样的事情:

const validateComment = (value, allValues, props) => {
  // naturally you do something else here if the value
  // used to determine whether this field is required or
  // not is not managed by the same redux form
  const isRequired = allValues.commentRequired === 'Yes'

  if (isRequired && !value) return "Can't be empty."
}

<Field
  name={`${fieldId}.comment`}
  validate={ validateComment }
  label={condition.label}
  className="form-control"
  component={renderTextField}
/>

希望这有帮助!