react-hook-formで確認用パスワードの入力チェックを実装してみる

概要

Formである項目を入力した時に、別の項目の入力内容と比較してチェックをしたい時があると思います。例えばこちらで紹介されているような、確認用パスワードの入力です。
今回はreact-hook-formでこの確認用パスワードの入力チェックを実装してみたので、どのようになったのかというのを紹介してみます。

実装方針

・親コンポーネント、パスワードの入力用コンポーネント、確認用パスワードの入力用コンポーネントの3つでコンポーネント分けします。
・入力された値は親コンポーネントのformStateで管理します。formStateからはgetValuesを使用して、入力した値を取得します。
・確認用パスワードの入力欄では、getValuesで取得したパスワードの値とこちらの記事で紹介されているvalidateメソッドを使って比較します。

実装

【親コンポーネント】

ParentComponent.js

export default function ParentComponent() {
  const { register, handleSubmit, errors, formState, getValues } = useForm({
    mode: "onChange",
  });

  function onSubmit(data) {
    // submit処理は割愛・・
  }

  return (
    <div>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <PasswordInputComponent register={register} errors={errors} />
        <br />
        <PasswordReInputComponent
          register={register}
          errors={errors}
          password={getValues("password")}
        />
        <br />
        <Button variant={"primary"} type="submit" disabled={!formState.isValid}>
          送信
        </Button>
      </Form>
    </div>
  );
}

【パスワードの入力用コンポーネント】

PasswordInputComponent.js

export default function PasswordInputComponent(prop) {
  return (
    <>
      <Form.Label>パスワード</Form.Label>
      <Form.Control
        id="password"
        type="password"
        name="password"
        placeholder="パスワード"
        isInvalid={prop.errors.password}
        style={{ width: "300px" }}
        ref={prop.register({
          required: "パスワードは必須項目です",
          minLength: {
            value: 6,
            message: "パスワードは6文字以上で入力してください",
          },
        })}
      />
      {prop.errors.password && (
        <Form.Control.Feedback type="invalid">
          {prop.errors.password.message}
        </Form.Control.Feedback>
      )}
    </>
  );
}

【確認用パスワードの入力用コンポーネント】

PasswordReInputComponent.js

export default function PasswordInputComponent(prop) {
  return (
    <>
      <Form.Label>パスワード（確認用）</Form.Label>
      <Form.Control
        id="passwordReInput"
        type="password"
        name="passwordReInput"
        placeholder="パスワード"
        isInvalid={prop.errors.passwordReInput}
        style={{ width: "300px" }}
        ref={prop.register({
          validate: (input) => input === prop.password,
        })}
      />
      {prop.errors.passwordReInput && (
        <Form.Control.Feedback type="invalid">
          <span>入力したパスワードと一致していません</span>
        </Form.Control.Feedback>
      )}
    </>
  );
}