Как узнать, когда все поля проверены (добавлены значения) в форме Ant-Design? - PullRequest
Новая
       20

Как узнать, когда все поля проверены (добавлены значения) в форме Ant-Design?

0 голосов
/ 23 мая 2019

У меня есть простой Form, который проверяет вводимые пользователем значения, такие как имя, адрес электронной почты и адрес, и проверяет их. До сих пор я успешно достиг этого. Но у меня есть отправка button как последняя Form.Item, которую я хочу включить, только когда все поля ввода заполнены и проверены.

Как мне проверить это и затем установить состояние formCompleted, которое включает отключение кнопки?

1 Ответ

1 голос
/ 23 мая 2019

Проверьте этот пример 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.

Надеюсь, это поможет!

...