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

Question

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

我应该如何检查这一点并随后设置状态 formCompleted 以切换禁用按钮？

Answer 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.

显示错误之前检查之前是否已触及字段的原因

希望对您有所帮助！

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

How to Know When All Fields are Validated (Values Added) in Ant-Design Form?

reactjs

antd

ant-design-pro