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表单中验证所有字段（添加值）？

1 个答案: