链接两个表单字段 | TanStack Form React Docs

链接两个表单字段

您可能会发现需要将两个字段链接在一起；当一个字段的值发生变化时，另一个字段需要被验证。一个这样的用法是当您同时拥有 password 和 confirm_password 字段时，您希望当 password 的值不匹配时，confirm_password 会出错；无论是哪个字段触发了值的变化。

想象以下用户流程：

用户更新确认密码字段。
用户更新非确认密码字段。

在这个例子中，表单仍然会有错误存在，因为"确认密码"字段验证没有重新运行以标记为接受。

为了解决这个问题，我们需要确保当密码字段更新时，"确认密码"验证会重新运行。要做到这一点，您可以向 confirm_password 字段添加 onChangeListenTo 属性。

tsx

function App() {
  const form = useForm({
    defaultValues: {
      password: '',
      confirm_password: '',
    },
    // ...
  })

  return (
    <div>
      <form.Field name="password">
        {(field) => (
          <label>
            <div>密码</div>
            <input
              value={field.state.value}
              onChange={(e) => field.handleChange(e.target.value)}
            />
          </label>
        )}
      </form.Field>
      <form.Field
        name="confirm_password"
        validators={{
          onChangeListenTo: ['password'],
          onChange: ({ value, fieldApi }) => {
            if (value !== fieldApi.form.getFieldValue('password')) {
              return '密码不匹配'
            }
            return undefined
          },
        }}
      >
        {(field) => (
          <div>
            <label>
              <div>确认密码</div>
              <input
                value={field.state.value}
                onChange={(e) => field.handleChange(e.target.value)}
              />
            </label>
            {field.state.meta.errors.map((err) => (
              <div key={err}>{err}</div>
            ))}
          </div>
        )}
      </form.Field>
    </div>
  )
}

function App() {
  const form = useForm({
    defaultValues: {
      password: '',
      confirm_password: '',
    },
    // ...
  })

  return (
    <div>
      <form.Field name="password">
        {(field) => (
          <label>
            <div>密码</div>
            <input
              value={field.state.value}
              onChange={(e) => field.handleChange(e.target.value)}
            />
          </label>
        )}
      </form.Field>
      <form.Field
        name="confirm_password"
        validators={{
          onChangeListenTo: ['password'],
          onChange: ({ value, fieldApi }) => {
            if (value !== fieldApi.form.getFieldValue('password')) {
              return '密码不匹配'
            }
            return undefined
          },
        }}
      >
        {(field) => (
          <div>
            <label>
              <div>确认密码</div>
              <input
                value={field.state.value}
                onChange={(e) => field.handleChange(e.target.value)}
              />
            </label>
            {field.state.meta.errors.map((err) => (
              <div key={err}>{err}</div>
            ))}
          </div>
        )}
      </form.Field>
    </div>
  )
}

这同样适用于 onBlurListenTo 属性，它会在字段失焦时重新运行验证。