Zwei Formularfelder verknüpfen | TanStack Form Vue Docs

Möglicherweise müssen Sie zwei Felder miteinander verknüpfen; wenn eines validiert wird, während sich der Wert eines anderen Feldes ändert. Ein solcher Anwendungsfall ist, wenn Sie sowohl ein Passwort- als auch ein Passwort_bestätigen-Feld haben, bei dem Sie möchten, dass Passwort_bestätigen einen Fehler meldet, wenn der Wert von Passwort nicht übereinstimmt; unabhängig davon, welches Feld die Wertänderung ausgelöst hat.

Stellen Sie sich den folgenden Benutzerfluss vor

Benutzer aktualisiert das Feld "Passwort bestätigen".
Benutzer aktualisiert das Feld "Nicht Passwort bestätigen".

In diesem Beispiel weist das Formular immer noch Fehler auf, da die Validierung des Feldes "Passwort bestätigen" nicht erneut ausgeführt wurde, um als akzeptiert markiert zu werden.

Um dies zu lösen, müssen wir sicherstellen, dass die Validierung des Feldes "Passwort bestätigen" erneut ausgeführt wird, wenn das Feld "Passwort" aktualisiert wird. Dazu können Sie eine onChangeListenTo-Eigenschaft zum Feld Passwort_bestätigen hinzufügen.

vue

<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'

const form = useForm({
  defaultValues: {
    password: '',
    confirm_password: '',
  },
  // ...
})
</script>

<template>
  <div>
    <form @submit.prevent.stop="form.handleSubmit">
      <div>
        <form.Field name="password">
          <template v-slot="{ field }">
            <div>Password:</div>
            <input
              :value="field.state.value"
              @input="
                (e) => field.handleChange((e.target as HTMLInputElement).value)
              "
            />
          </template>
        </form.Field>
        <form.Field
          name="confirm_password"
          :validators="{
            onChangeListenTo: ['password'],
            onChange: ({ value, fieldApi }) => {
              if (value !== fieldApi.form.getFieldValue('password')) {
                return 'Passwords do not match'
              }
              return undefined
            },
          }"
        >
          <template v-slot="{ field }">
            <div>Confirm Password:</div>
            <input
              :value="field.state.value"
              @input="
                (e) => field.handleChange((e.target as HTMLInputElement).value)
              "
            />
            <div v-for="(err, index) in field.state.meta.errors" :key="index">
              {{ err }}
            </div>
          </template>
        </form.Field>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'

const form = useForm({
  defaultValues: {
    password: '',
    confirm_password: '',
  },
  // ...
})
</script>

<template>
  <div>
    <form @submit.prevent.stop="form.handleSubmit">
      <div>
        <form.Field name="password">
          <template v-slot="{ field }">
            <div>Password:</div>
            <input
              :value="field.state.value"
              @input="
                (e) => field.handleChange((e.target as HTMLInputElement).value)
              "
            />
          </template>
        </form.Field>
        <form.Field
          name="confirm_password"
          :validators="{
            onChangeListenTo: ['password'],
            onChange: ({ value, fieldApi }) => {
              if (value !== fieldApi.form.getFieldValue('password')) {
                return 'Passwords do not match'
              }
              return undefined
            },
          }"
        >
          <template v-slot="{ field }">
            <div>Confirm Password:</div>
            <input
              :value="field.state.value"
              @input="
                (e) => field.handleChange((e.target as HTMLInputElement).value)
              "
            />
            <div v-for="(err, index) in field.state.meta.errors" :key="index">
              {{ err }}
            </div>
          </template>
        </form.Field>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

Dies funktioniert ähnlich mit der onBlurListenTo-Eigenschaft, die die Validierung erneut ausführt, wenn das Feld den Fokus verliert.

Verknüpfen Sie zwei Formularfelder

Bytes abonnieren

Bytes abonnieren