reactjs - 如何知道何时在 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 显示错误之前检查字段是否已被触摸过。 .

希望有帮助!