如何知道 Ant-Design 表单中的所有字段何时被验证（添加值）？

Posted 2023-03-07

【中文标题】如何知道 Ant-Design 表单中的所有字段何时被验证（添加值）？

【英文标题】：How to Know When All Fields are Validated (Values Added) in Ant-Design Form?

【发布时间】：2019-10-10 05:47:21

【问题描述】：

我有一个简单的Form，它检查用户的输入值，例如姓名、电子邮件和地址并验证它们。到目前为止，我已经成功实现了这一点。但是我有一个提交 button 作为最后一个 Form.Item，我只想在所有输入字段都填写并验证后才启用它。

我应该如何检查并随后设置状态formCompleted 来切换按钮的禁用？

【参考方案1】：

检查这个例子https://ant.design/components/form/#components-form-demo-horizontal-login。

function hasErrors(fieldsError) 
  return Object.keys(fieldsError).some(field => fieldsError[field]);


class HorizontalLoginForm extends React.Component 
  componentDidMount() 
    // To disabled submit button at the beginning.
    this.props.form.validateFields();
  

handleSubmit = e => 
    e.preventDefault();
    this.props.form.validateFields((err, values) => 
      if (!err) 
        console.log('Received values of form: ', values);
      
    );
  ;

  render() 
    const  getFieldDecorator, getFieldsError, getFieldError, isFieldTouched  = this.props.form;

    // Only show error after a field is touched.
    const usernameError = isFieldTouched('username') && getFieldError('username');

    return (
      <Form layout="inline" onSubmit=this.handleSubmit>
        <Form.Item validateStatus=usernameError ? 'error' : '' help=usernameError || ''>
          getFieldDecorator('username', 
            rules: [ required: true, message: 'Please input your username!' ],
          )(
            <Input placeholder="Username" />,
          )
        </Form.Item>

        <Form.Item>
          <Button htmlType="submit" disabled=hasErrors(getFieldsError())>
            Log in
          </Button>
        </Form.Item>
      </Form>
    );
  

该示例检查getFieldsError 是否有任何值来确定是否应禁用按钮。当表单首次挂载时，它使用validateFields 来验证您的输入并更新getFieldsError。这样做的问题是错误会在任何输入发生之前显示，这就是为什么它会在使用 isFieldTouched 显示错误之前检查字段是否已被触摸。

希望有帮助！

【讨论】：

哈...大声笑为什么我没有看到文档中的第一个示例！？傻我;p谢谢@John Wong，顺便说一句

它很好用，但是如果我还必须包含一个复选框作为表单项，并且当它被选中时才启用提交按钮，它就不起作用了。查看我的代码：const agreementError = isFieldTouched('ag') && getFieldError('ag') <Form.Item validateStatus=agreementError ? 'error' : '' help=agreementError || ''> getFieldDecorator('ag', rules: [ required: true, message: 'Please check it!' ], valuePropName: 'checked', initialValue: false, )(<Checkbox>I've read the T&C</Checkbox>) </Form.Item>

没关系。在将类型设置为布尔值并使用自定义验证器后使其工作

刚刚看到你的答案。不知道我们是否最终得到了相同的答案，但这是我找到的答案 github.com/ant-design/ant-design/issues/…。此外，您也可以在 Button disabled prop <Button type="primary" htmlType="submit" disabled=hasErrors(getFieldsError()) || !getFieldValue("ag")>

中检查您的复选框值

太棒了！谢谢约翰。感谢您的帮助！