Dynamische Validierung

In vielen Fällen möchten Sie die Validierungsregeln basierend auf dem Zustand des Formulars oder anderen Bedingungen ändern. Das beliebteste Beispiel dafür ist, wenn Sie ein Feld anders validieren möchten, je nachdem, ob der Benutzer das Formular zum ersten Mal übermittelt hat oder nicht.

Wir unterstützen dies durch unsere onDynamic Validierungsfunktion.

angular-ts

import { Component } from '@angular/core'
import { TanStackField, injectForm, revalidateLogic } from '@tanstack/angular-form'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <!-- Your form template here -->
  `,
})
export class AppComponent {
  form = injectForm({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    // If this is omitted, onDynamic will not be called
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
    },
  })
}

import { Component } from '@angular/core'
import { TanStackField, injectForm, revalidateLogic } from '@tanstack/angular-form'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <!-- Your form template here -->
  `,
})
export class AppComponent {
  form = injectForm({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    // If this is omitted, onDynamic will not be called
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
    },
  })
}

Standardmäßig wird onDynamic nicht aufgerufen, daher müssen Sie revalidateLogic() an die Option validationLogic von injectForm übergeben.

Revalidierungsoptionen

revalidateLogic ermöglicht es Ihnen anzugeben, wann die Validierung ausgeführt werden soll und die Validierungsregeln dynamisch basierend auf dem aktuellen Übermittlungsstatus des Formulars zu ändern.

Es nimmt zwei Argumente entgegen

mode: Der Validierungsmodus vor der ersten Formularübermittlung. Dies kann einer der folgenden sein:
- change: Validieren bei jeder Änderung.
- blur: Validieren beim Verlassen des Feldes (Blur).
- submit: Validieren bei Übermittlung. (Standard)
modeAfterSubmission: Der Validierungsmodus, nachdem das Formular übermittelt wurde. Dies kann einer der folgenden sein:
- change: Validieren bei jeder Änderung. (Standard)
- blur: Validieren beim Verlassen des Feldes (Blur).
- submit: Validieren bei Übermittlung.

Sie können beispielsweise das Folgende verwenden, um nach der ersten Übermittlung beim Verlassen des Feldes neu zu validieren.

angular-ts

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <!-- Your form template here -->
  `,
})
export class AppComponent {
  form = injectForm({
    // ...
    validationLogic: revalidateLogic({
      mode: 'submit',
      modeAfterSubmission: 'blur',
    }),
    // ...
  })
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <!-- Your form template here -->
  `,
})
export class AppComponent {
  form = injectForm({
    // ...
    validationLogic: revalidateLogic({
      mode: 'submit',
      modeAfterSubmission: 'blur',
    }),
    // ...
  })
}

Zugriff auf Fehler

So wie Sie auf Fehler von einer onChange oder onBlur Validierung zugreifen können, können Sie mit dem Fehler-Map des Formulars über injectStore auf die Fehler der onDynamic Validierungsfunktion zugreifen.

angular-ts

import { Component } from '@angular/core'
import { TanStackField, injectForm, injectStore, revalidateLogic } from '@tanstack/angular-form'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <p>{{ formErrorMap().onDynamic?.firstName }}</p>
  `,
})
export class AppComponent {
  form = injectForm({
    // ...
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
    },
  })

  formErrorMap = injectStore(this.form, (state) => state.errorMap)
}

import { Component } from '@angular/core'
import { TanStackField, injectForm, injectStore, revalidateLogic } from '@tanstack/angular-form'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <p>{{ formErrorMap().onDynamic?.firstName }}</p>
  `,
})
export class AppComponent {
  form = injectForm({
    // ...
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
    },
  })

  formErrorMap = injectStore(this.form, (state) => state.errorMap)
}

Verwendung mit anderer Validierungslogik

Sie können die onDynamic Validierung neben anderer Validierungslogik verwenden, wie z. B. onChange oder onBlur.

angular-ts

import { Component } from '@angular/core'
import { TanStackField, injectForm, injectStore, revalidateLogic } from '@tanstack/angular-form'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <div>
      <p>{{ formErrorMap().onChange?.firstName }}</p>
      <p>{{ formErrorMap().onDynamic?.lastName }}</p>
    </div>
  `,
})
export class AppComponent {
  form = injectForm({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    validationLogic: revalidateLogic(),
    validators: {
      onChange: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
      onDynamic: ({ value }) => {
        if (!value.lastName) {
          return { lastName: 'A last name is required' }
        }
        return undefined
      },
    },
  })

  formErrorMap = injectStore(this.form, (state) => state.errorMap)
}

import { Component } from '@angular/core'
import { TanStackField, injectForm, injectStore, revalidateLogic } from '@tanstack/angular-form'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <div>
      <p>{{ formErrorMap().onChange?.firstName }}</p>
      <p>{{ formErrorMap().onDynamic?.lastName }}</p>
    </div>
  `,
})
export class AppComponent {
  form = injectForm({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    validationLogic: revalidateLogic(),
    validators: {
      onChange: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
      onDynamic: ({ value }) => {
        if (!value.lastName) {
          return { lastName: 'A last name is required' }
        }
        return undefined
      },
    },
  })

  formErrorMap = injectStore(this.form, (state) => state.errorMap)
}

Verwendung mit Feldern

Sie können die onDynamic Validierung auch mit Feldern verwenden, genau wie Sie es mit anderer Validierungslogik tun würden.

angular-ts

import { Component } from '@angular/core'
import { TanStackField, injectForm, revalidateLogic } from '@tanstack/angular-form'
import type { FieldValidateFn } from '@tanstack/angular-form'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <form (submit)="handleSubmit($event)">
      <ng-container
        [tanstackField]="form"
        name="age"
        [validators]="{
          onDynamic: ageValidator
        }"
        #age="field"
      >
        <input
          type="number"
          [value]="age.api.state.value"
          (blur)="age.api.handleBlur()"
          (input)="age.api.handleChange($any($event).target.valueAsNumber)"
        />
        @if (age.api.state.meta.errorMap.onDynamic) {
          <p style="color: red">
            {{ age.api.state.meta.errorMap.onDynamic }}
          </p>
        }
      </ng-container>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent {
  ageValidator: FieldValidateFn<any, any, any, any, number> = ({ value }) =>
    value > 18 ? undefined : 'Age must be greater than 18'

  form = injectForm({
    defaultValues: {
      name: '',
      age: 0,
    },
    validationLogic: revalidateLogic(),
    onSubmit({ value }) {
      alert(JSON.stringify(value))
    },
  })

  handleSubmit(event: SubmitEvent) {
    event.preventDefault()
    event.stopPropagation()
    this.form.handleSubmit()
  }
}

import { Component } from '@angular/core'
import { TanStackField, injectForm, revalidateLogic } from '@tanstack/angular-form'
import type { FieldValidateFn } from '@tanstack/angular-form'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <form (submit)="handleSubmit($event)">
      <ng-container
        [tanstackField]="form"
        name="age"
        [validators]="{
          onDynamic: ageValidator
        }"
        #age="field"
      >
        <input
          type="number"
          [value]="age.api.state.value"
          (blur)="age.api.handleBlur()"
          (input)="age.api.handleChange($any($event).target.valueAsNumber)"
        />
        @if (age.api.state.meta.errorMap.onDynamic) {
          <p style="color: red">
            {{ age.api.state.meta.errorMap.onDynamic }}
          </p>
        }
      </ng-container>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent {
  ageValidator: FieldValidateFn<any, any, any, any, number> = ({ value }) =>
    value > 18 ? undefined : 'Age must be greater than 18'

  form = injectForm({
    defaultValues: {
      name: '',
      age: 0,
    },
    validationLogic: revalidateLogic(),
    onSubmit({ value }) {
      alert(JSON.stringify(value))
    },
  })

  handleSubmit(event: SubmitEvent) {
    event.preventDefault()
    event.stopPropagation()
    this.form.handleSubmit()
  }
}

Asynchrone Validierung

Asynchrone Validierung kann auch mit onDynamic verwendet werden, genau wie mit anderer Validierungslogik. Sie können die asynchrone Validierung sogar verzögern (debounce), um übermäßige Aufrufe zu vermeiden.

angular-ts

import { Component } from '@angular/core'
import { TanStackField, injectForm, revalidateLogic } from '@tanstack/angular-form'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <!-- Your form template here -->
  `,
})
export class AppComponent {
  form = injectForm({
    defaultValues: {
      username: '',
    },
    validationLogic: revalidateLogic(),
    validators: {
      onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
      onDynamicAsync: async ({ value }) => {
        if (!value.username) {
          return { username: 'Username is required' }
        }
        // Simulate an async validation
        const isValid = await validateUsername(value.username)
        return isValid ? undefined : { username: 'Username is already taken' }
      },
    },
  })
}

import { Component } from '@angular/core'
import { TanStackField, injectForm, revalidateLogic } from '@tanstack/angular-form'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <!-- Your form template here -->
  `,
})
export class AppComponent {
  form = injectForm({
    defaultValues: {
      username: '',
    },
    validationLogic: revalidateLogic(),
    validators: {
      onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
      onDynamicAsync: async ({ value }) => {
        if (!value.username) {
          return { username: 'Username is required' }
        }
        // Simulate an async validation
        const isValid = await validateUsername(value.username)
        return isValid ? undefined : { username: 'Username is already taken' }
      },
    },
  })
}

Standard-Schema-Validierung

Sie können auch Standard-Schema-Validierungsbibliotheken wie Valibot oder Zod mit der onDynamic Validierung verwenden. Dies ermöglicht es Ihnen, komplexe Validierungsregeln zu definieren, die sich dynamisch basierend auf dem Formularzustand ändern können.

angular-ts

import { Component } from '@angular/core'
import { TanStackField, injectForm, revalidateLogic } from '@tanstack/angular-form'
import { z } from 'zod'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <!-- Your form template here -->
  `,
})
export class AppComponent {
  schema = z.object({
    firstName: z.string().min(1, 'A first name is required'),
    lastName: z.string().min(1, 'A last name is required'),
  })

  form = injectForm({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: this.schema,
    },
  })
}

import { Component } from '@angular/core'
import { TanStackField, injectForm, revalidateLogic } from '@tanstack/angular-form'
import { z } from 'zod'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <!-- Your form template here -->
  `,
})
export class AppComponent {
  schema = z.object({
    firstName: z.string().min(1, 'A first name is required'),
    lastName: z.string().min(1, 'A last name is required'),
  })

  form = injectForm({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: this.schema,
    },
  })
}

Revalidierungsoptionen

Zugriff auf Fehler

Verwendung mit anderer Validierungslogik

Verwendung mit Feldern

Asynchrone Validierung

Standard-Schema-Validierung

Bytes abonnieren

Bytes abonnieren