Angular adapter

[crutchcorn]

Hi Enea

This PR starts an initial Angular adapter that has an API like so:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackField],
  template: `
    <p>Testing</p>
    <form (submit)="handleSubmit($event)">
      <ng-container
        [tanstackField]="form"
        name="firstName"
        [validators]="{ onChange: required }"
        #f="field"
      >
        <label>
          <div>First name:</div>
          <input
            [value]="f.api.state.value"
            (blur)="f.api.handleBlur()"
            (input)="f.api.handleChange($any($event).target.value)"
          />
        </label>
        @for (error of f.api.state.meta.errors; track $index) {
          <div style="color: red">
            {{ error }}
          </div>
        }
      </ng-container>
      <button>Submit</button>
    </form>
  `,
})
export class AppComponent {
  required: FieldValidateFn<any, string> = ({ value }) => {
    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()
  }
}

This should work with any of the adapters (Zod) OOTB day 1.

This is still WIP despite working as we're waiting for:

• TypeScript type validation
• Examples
• Tests
• Docs
• Fixing configuration to publish the package on merge

This API was directly inspired by conversations I had with @nartc who brainstormed the initial API. Thank you!

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d005782. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx affected --targets=test:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3

---

Sent with 💌 from NxCloud.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 90.00000% with 3 lines in your changes are missing coverage. Please review.

Project coverage is 88.86%. Comparing base (ac3fdb8) to head (d005782).
Report is 1 commits behind head on main.

Files	Patch %	Lines
packages/angular-form/src/inject-store.ts	0.00%	2 Missing ⚠️
...kages/angular-form/src/tanstack-field.directive.ts	95.23%	1 Missing ⚠️

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #627      +/-   ##
==========================================
+ Coverage   88.82%   88.86%   +0.04%     
==========================================
  Files          28       32       +4     
  Lines         814      844      +30     
  Branches      188      189       +1     
==========================================
+ Hits          723      750      +27     
- Misses         84       87       +3     
  Partials        7        7              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[crutchcorn]

Per a conversation with @alxhub at ngConf, the API has shifted from:

<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>

To:

<ng-container
  [tanstackField]="form"
  name="firstName"
  [validators]="{ onChange: required }"
  #f="field"
>
  <label>
    <div>First name:</div>
    <input
      [value]="f.api.state.value"
      (blur)="f.api.handleBlur()"
      (input)="f.api.handleChange($any($event).target.value)"
    />
  </label>
  <div *ngFor="let error of f.api.state.meta.errors" style="color: red">
    {{ error }}
  </div>
</ng-container>

This should have better performance heuristics as well as a nicer DX