Einreichungsverwaltung | TanStack Form Angular Docs

Übergabe zusätzlicher Daten an das Einreichungshandling

Sie können mehrere Arten von Einreichungsverhalten haben, z. B. das Zurückkehren zu einer anderen Seite oder das Verbleiben im Formular. Dies erreichen Sie, indem Sie die Eigenschaft onSubmitMeta angeben. Diese Metadaten werden an die Funktion onSubmit übergeben.

Hinweis: Wenn form.handleSubmit() ohne Metadaten aufgerufen wird, wird die angegebene Standardeinstellung verwendet.

angular-ts

import { Component } from '@angular/core';
import { injectForm } from '@tanstack/angular-form';


type FormMeta = {
  submitAction: 'continue' | 'backToMenu' | null;
};

// Metadata is not required to call form.handleSubmit().
// Specify what values to use as default if no meta is passed
const defaultMeta: FormMeta = {
  submitAction: null,
};

@Component({
  selector: 'app-root',
  template: `
    <form (submit)="handleSubmit($event)">
      <button type="submit" (click)="
        handleClick({ submitAction: 'continue' })
      ">Submit and continue</button>
      <button type="submit" (click)="
        handleClick({ submitAction: 'backToMenu' })
      ">Submit and back to menu</button>
    </form>
  `,
})
export class AppComponent {
  form = injectForm({
    defaultValues: {
      data: '',
    },
    // Define what meta values to expect on submission
    onSubmitMeta: defaultMeta,
    onSubmit: async ({ value, meta }) => {
      // Do something with the values passed via handleSubmit
      console.log(`Selected action - ${meta.submitAction}`, value);
    },
  });

  handleSubmit(event: SubmitEvent) {
    event.preventDefault();
    event.stopPropagation();
  }

  handleClick(meta: FormMeta) {
    // Overwrites the default specified in onSubmitMeta
    this.form.handleSubmit(meta);
  }
}

import { Component } from '@angular/core';
import { injectForm } from '@tanstack/angular-form';


type FormMeta = {
  submitAction: 'continue' | 'backToMenu' | null;
};

// Metadata is not required to call form.handleSubmit().
// Specify what values to use as default if no meta is passed
const defaultMeta: FormMeta = {
  submitAction: null,
};

@Component({
  selector: 'app-root',
  template: `
    <form (submit)="handleSubmit($event)">
      <button type="submit" (click)="
        handleClick({ submitAction: 'continue' })
      ">Submit and continue</button>
      <button type="submit" (click)="
        handleClick({ submitAction: 'backToMenu' })
      ">Submit and back to menu</button>
    </form>
  `,
})
export class AppComponent {
  form = injectForm({
    defaultValues: {
      data: '',
    },
    // Define what meta values to expect on submission
    onSubmitMeta: defaultMeta,
    onSubmit: async ({ value, meta }) => {
      // Do something with the values passed via handleSubmit
      console.log(`Selected action - ${meta.submitAction}`, value);
    },
  });

  handleSubmit(event: SubmitEvent) {
    event.preventDefault();
    event.stopPropagation();
  }

  handleClick(meta: FormMeta) {
    // Overwrites the default specified in onSubmitMeta
    this.form.handleSubmit(meta);
  }
}

Daten mit Standard-Schemas transformieren

Während Tanstack Form Standard-Schema-Unterstützung für die Validierung bietet, behält es die Ausgabedaten des Schemas nicht bei.

Der Wert, der an die Funktion onSubmit übergeben wird, sind immer die Eingabedaten. Um die Ausgabedaten eines Standard-Schemas zu erhalten, parsen Sie diese in der Funktion onSubmit.

tsx

import { z } from 'zod'
// ...

const schema = z.object({
  age: z.string().transform((age) => Number(age)),
})

// Tanstack Form uses the input type of Standard Schemas
const defaultValues: z.input<typeof schema> = {
  age: '13',
}

// ...

@Component({
  // ...
})
export class AppComponent {
  form = injectForm({
    defaultValues,
    validators: {
      onChange: schema,
    },
    onSubmit: ({ value }) => {
      const inputAge: string = value.age
      // Pass it through the schema to get the transformed value
      const result = schema.parse(value)
      const outputAge: number = result.age
    },
  })
}

import { z } from 'zod'
// ...

const schema = z.object({
  age: z.string().transform((age) => Number(age)),
})

// Tanstack Form uses the input type of Standard Schemas
const defaultValues: z.input<typeof schema> = {
  age: '13',
}

// ...

@Component({
  // ...
})
export class AppComponent {
  form = injectForm({
    defaultValues,
    validators: {
      onChange: schema,
    },
    onSubmit: ({ value }) => {
      const inputAge: string = value.age
      // Pass it through the schema to get the transformed value
      const result = schema.parse(value)
      const outputAge: number = result.age
    },
  })
}

Einreichungshandling

Übergabe zusätzlicher Daten an das Einreichungshandling

Daten mit Standard-Schemas transformieren

Bytes abonnieren

Bytes abonnieren