6

ここで「フィールド 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>
    );
  }
}));

最初のフィールド値が 2 番目のフィールド値と一致することを確認するルールを作成するための正しい方向に誰かが私を向けることができれば、それは素晴らしいことです!

4

2 に答える 2

10

この登録フォームのデモで見つけることができます: https://ant.design/components/form/#components-form-demo-register

于 2017-01-07T15:02:30.217 に答える