Question

我有一个基于所选表单字段值所需的动态表单字段。即如果某个字段的值为＆＃34;是＆＃34;那么评论框是必需的，如果＆＃34; No＆＃34;然后它不是必需的。

如果我最初选择＆＃34;是＆＃34;并触摸并模糊注释字段，验证将返回所需的错误。但是如果我转到＆＃34; No＆＃34;然后回到＆＃34;是＆＃34;验证错误不再发生。如果我在评论框中输入并删除验证将再次发生。

我正在使用字段级验证，并且还使用同一问题进行同步验证。

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

条件是检查是否需要该字段。

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

提前致谢

Answer 1

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

验证：（value，allValues，props）=＆gt;错误[可选]

允许您提供字段级验证规则。功能   将给出该字段的当前值，所有其他形式   值和传递给表单的任何道具。如果该字段有效，则为   应该返回undefined，如果该字段无效，则应该返回一个   错误（通常，但不一定是字符串）。

您尝试直接将错误值传递给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}
/>

希望这有帮助！

Answer 2

对我来说很好。 allValues是成功的关键。就我而言，我需要验证电话或手机是否存在，如果其中之一存在则不进行验证，但是如果两者均为空，则请同时进行验证。

    validatePhone = (value: any, allValues: any) => {
      const isRequired = allValues.contactCell === undefined
      if (isRequired && !value) 
        return 'Phone is required';
    }

    validateCell = (value: any, allValues: any) => {
      const isRequired = allValues.contactPhone === undefined
      if (isRequired && !value) 
        return 'Cell is required';
    }

    <Field id="contactPhone" name="contactPhone" label="Phone" className="TextField" 
                 validate = {this.validatePhone} component={RenderTextField}/>
    <Field id="contactCell" name="contactCell" label="Cell" className="TextField" 
                 validate = {this.validateCell} component={RenderTextField}/>

Redux表单动态字段级别验证

2 个答案: