Skip to main content
Get started with TanStack Form in Angular by creating your first form with basic field handling and submission logic.

​
Installation

Install the Angular Form package: 
npm install @tanstack/angular-form

​
Basic Form Setup

The minimum setup requires creating a form instance with injectForm and adding a field using the tanstackField directive.
1
Import the required modules
2
Import TanStackField directive and injectForm function:
3
import { Component } from '@angular/core'
import { TanStackField, injectForm } from '@tanstack/angular-form'
4
Create the form instance
5
Use Angular’s dependency injection to create a form instance in your component:
6
form = injectForm({
  defaultValues: {
    fullName: '',
  },
  onSubmit({ value }) {
    // Do something with form data
    console.log(value)
  },
})
7
Add fields to your template
8
Use the tanstackField directive with a template reference variable to bind your input:
9
<ng-container
  [tanstackField]="form"
  name="fullName"
  #fullName="field"
>
  <label [for]="fullName.api.name">First Name:</label>
  <input
    [name]="fullName.api.name"
    [value]="fullName.api.state.value"
    (blur)="fullName.api.handleBlur()"
    (input)="fullName.api.handleChange($any($event).target.value)"
  />
</ng-container>
10
Handle form submission
11
Prevent default form submission and call the form’s handleSubmit method:
12
handleSubmit(event: SubmitEvent) {
  event.preventDefault()
  event.stopPropagation()
  this.form.handleSubmit()
}

​
Complete Example

Here’s a complete working example: 
import { Component } from '@angular/core'
import { bootstrapApplication } from '@angular/platform-browser'
import { TanStackField, injectForm } from '@tanstack/angular-form'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <form (submit)="handleSubmit($event)">
      <div>
        <ng-container
          [tanstackField]="form"
          name="fullName"
          #fullName="field"
        >
          <label [for]="fullName.api.name">First Name:</label>
          <input
            [name]="fullName.api.name"
            [value]="fullName.api.state.value"
            (blur)="fullName.api.handleBlur()"
            (input)="fullName.api.handleChange($any($event).target.value)"
          />
        </ng-container>
      </div>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent {
  form = injectForm({
    defaultValues: {
      fullName: '',
    },
    onSubmit({ value }) {
      // Do something with form data
      console.log(value)
    },
  })

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

bootstrapApplication(AppComponent).catch((err) => console.error(err))

​
Next Steps

Now that you have a basic form working, explore more features:

Build docs developers (and LLMs) love

Get started for freeTalk to us