Правила getFieldDecorator для сброса пароля?

Я пытаюсь сделать здесь «поле 2 не соответствует полю 1» (т.е. «пароли не совпадают»).

Существует не так много документации по доступным правилам для форм antd. Они указывают на этот проект здесь.

Ниже моя текущая форма:

const ResetPasswordForm = Form.create()(React.createClass({
  getInitialState () {
    return {
      loading: false
    };
  },
  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (err) {
        failure();
      }
      if (!err) {
        let newPassword = values.newPassword;
        let repeatNewPassword = values.repeatNewPassword;
        handleResetPassword(newPassword, repeatNewPassword, this.props.token);
      }
    });

  },
  render() {
    const { getFieldDecorator } = this.props.form;

    const newPasswordRules = [
      { required: true, message: 'Please input a new password!' }
    ];

    const repeatNewPassword = [
      { required: true, message: 'Please repeat the new password!' }
    ];

    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {getFieldDecorator('newPassword', { rules: newPasswordRules })(
            <Input addonBefore={<Icon type="lock" />} type="password" placeholder="New password" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('repeatNewPassword', { rules: repeatNewPassword })(
            <Input addonBefore={<Icon type="lock" />} type="password" placeholder="Repeat new password" />
          )}
        </FormItem>
        <FormItem>
          <Button loading={this.state.loading} type="primary" htmlType="submit" className={css(styles.loginButton)}>
            Reset Password
          </Button>
        </FormItem>
      </Form>
    );
  }
}));

Если кто-нибудь может указать мне правильное направление для создания правила, которое проверяет, соответствует ли первое значение поля второму, это было бы здорово!


reactjs antd
person arcom    schedule 06.01.2017    source источник
comment
Ответ Алекса Карпова помогает   -  person Nagama Inamdar    schedule 13.04.2021

Ответы (2)


arrow_upward
10
arrow_downward

Вы можете найти его в этой демонстрации регистрационной формы: https://ant.design/components/form/#components-form-demo-register

person afc163    schedule 07.01.2017
comment
Это как-то проскользнуло мимо меня. Спасибо. - person arcom; 07.01.2017

arrow_upward
3
arrow_downward

Пожалуйста, следуйте этим строкам:

  <Form.Item
    name="password"
    label="Password"
    rules={[
      {
        required: true,
        message: 'Please input your password!',
      },
    ]}
    hasFeedback
  >
    <Input.Password />
  </Form.Item>

  <Form.Item
    name="confirm"
    label="Confirm Password"
    dependencies={['password']}
    hasFeedback
    rules={[
      {
        required: true,
        message: 'Please confirm your password!',
      },
      ({ getFieldValue }) => ({
        validator(rule, value) {
          if (!value || getFieldValue('password') === value) {
            return Promise.resolve();
          }
          return Promise.reject('The two passwords that you entered do not match!');
        },
      }),
    ]}
  >
    <Input.Password />
  </Form.Item>
person Alex Karpov    schedule 07.07.2020
comment
Хорошо поймал. Блестящий - person Danny Sofftie; 10.10.2020
comment
Спасибо :) Рад, что могу помочь - Дэнни! - person Alex Karpov; 14.04.2021
comment
что такое "валидатор"? - person Fida; 25.04.2021