> ## Content Index
> Fetch the complete content index at: https://www.angularspace.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# TanStack Form + Angular - First Look!
- URL: https://www.angularspace.com/first-look-tanstack-form-angular-a/
- Published: 2024-03-17T22:50:48.000Z
- Updated: 2024-03-17T22:50:48.000Z
- Author: Daniel Glejzner
- Tags: Bite-Sized

It's here.

We have a first draft of working code for **TanStack Form Angular Adapter!**

Take a look at the implementation below and **make sure to provide your feedback** on how you feel with the current proposal. 

Do it directly in comments on GitHub or under this post.

[\[WIP\] Angular adapter by crutchcorn · Pull Request #627 · TanStack/formHi 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…![](https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg)GitHubTanStack![](https://opengraph.githubassets.com/e2e78c08dce592482e75043d59ebeef655dc4f7ec72bf4c7747333d6a22d9d34/TanStack/form/pull/627)](https://github.com/TanStack/form/pull/627?ref=angularspace.com)

Code:

```js
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()
  }
}

```

Is this how you imagined an alternative for Template Driven/Reactive Forms?