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

Question

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

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

标签： reactjsantdant-design-pro

Answer 1

检查此示例https://ant.design/components/form/#components-form-demo-horizo​​ntal-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.

希望有帮助！