The first working draft of the TanStack Form Angular Adapter is now available.

Review the implementation below and share your feedback on how the current proposal feels to you.

Leave your thoughts either in the GitHub comments or underneath this post.

[WIP] Angular adapter by crutchcorn · Pull Request #627 · TanStack/form
Hi Enea This PR starts an initial Angular adapter that has an API like so: import { Component } from ‘@angular/core’ import { injectForm, TanStackField } from ‘@tanstack/angular-form’ import { NgF…
GitHubTanStack

Source code:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField, NgFor],
  template: `
    <form (submit)="handleSubmit($event)">
      <ng-template
        [tanstackField]="form"
        name="firstName"
        [validators]="{ onChange: required }"
        let-field
      >
        <label>
          <div>First name:</div>
          <input
            [value]="field.state.value"
            (blur)="field.handleBlur()"
            (input)="field.handleChange($any($event).target.value)"
          />
        </label>
        <div *ngFor="let error of field.state.meta.errors" style="color: red">
          {{ error }}
        </div>
      </ng-template>
      <button>Submit</button>
    </form>
  `,
})
export class AppComponent {
  required = ({ value }: { value: string }) => {
    return !value ? 'Required' : undefined
  }
  form = injectForm({
    defaultValues: {
      firstName: 'Ryan',
      age: 25,
    },
    onSubmit({ value }: any) {
      console.log({ value })
    },
  })

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

Does this match what you pictured as an alternative to Template Driven and Reactive Forms?

Tagged in:

Bite-Sized

Last Update: March 17, 2024