chore: fix usage of field.api for consistency, wrote tests

Author: crutchcorn

examples/angular/large-form/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, input } from '@angular/core'
 import {
+  TanStackAppField,
   TanStackField,
-  TanStackFieldComponent,
   injectField,
   injectForm,
   injectStore,
@@ -15,25 +15,35 @@ import type {
   selector: 'app-text-field',
   standalone: true,
   template: `
-    <label [for]="lastName.api().name">{{ label() }}</label>
+    <label [for]="field.api.name">{{ label() }}</label>
     <input
-      [id]="lastName.api().name"
-      [name]="lastName.api().name"
-      [value]="lastName.api().state.value"
-      (blur)="lastName.api().handleBlur()"
-      (input)="lastName.api().handleChange($any($event).target.value)"
+      [id]="field.api.name"
+      [name]="field.api.name"
+      [value]="field.api.state.value"
+      (blur)="field.api.handleBlur()"
+      (input)="field.api.handleChange($any($event).target.value)"
     />
+    @if (field.api.state.meta.isTouched) {
+      @for (error of field.api.state.meta.errors; track $index) {
+        <div style="color: red">
+          {{ error }}
+        </div>
+      }
+    }
+    @if (field.api.state.meta.isValidating) {
+      <p>Validating...</p>
+    }
   `,
 })
 export class AppTextField {
   label = input.required<string>()
-  lastName = injectField<string>()
+  field = injectField<string>()
 }
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [TanStackField, TanStackFieldComponent, AppTextField],
+  imports: [TanStackField, TanStackAppField, AppTextField],
   template: `
     <form (submit)="handleSubmit($event)">
       <div>

packages/angular-form/src/app-field.component.ts renamed to packages/angular-form/src/app-field.ts

@@ -5,7 +5,7 @@ import {
   FieldAsyncValidateOrFn,
   FieldValidateOrFn,
 } from '@tanstack/form-core'
-import { TanStackField } from './tanstack-field.directive'
+import { TanStackField } from './tanstack-field'
 import { TanStackFieldInjectable } from './injectable'
 import type {
   FormAsyncValidateOrFn,
@@ -17,7 +17,7 @@ import type {
   standalone: true,
   providers: [TanStackFieldInjectable],
 })
-export class TanStackFieldComponent<
+export class TanStackAppField<
   TParentData,
   const TName extends DeepKeys<TParentData>,
   TData extends DeepValue<TParentData, TName>,
@@ -69,7 +69,7 @@ export class TanStackFieldComponent<
   constructor() {
     super()
     effect(() => {
-      this.base.api.set(this.api)
+      this.base._api.set(this.api)
     })
   }
 }

packages/angular-form/src/index.ts

@@ -1,7 +1,7 @@
 export * from '@tanstack/form-core'
 
-export { TanStackFieldComponent } from './app-field.component'
+export { TanStackAppField } from './app-field'
 export { injectForm } from './inject-form'
-export { TanStackField } from './tanstack-field.directive'
+export { TanStackField } from './tanstack-field'
 export { injectStore } from './inject-store'
 export { TanStackFieldInjectable, injectField } from './injectable'

packages/angular-form/src/injectable.ts

@@ -3,7 +3,7 @@ import { FieldApi } from '@tanstack/form-core'
 
 @Injectable({ providedIn: null })
 export class TanStackFieldInjectable<T> {
-  api = signal<
+  _api = signal<
     FieldApi<
       any,
       any,
@@ -26,6 +26,10 @@ export class TanStackFieldInjectable<T> {
       any
     >
   >(null as never)
+
+  get api() {
+    return this._api()
+  }
 }
 
 export function injectField<T>(): TanStackFieldInjectable<T> {

packages/angular-form/src/tanstack-field.directive.ts renamed to packages/angular-form/src/tanstack-field.ts

@@ -0,0 +1,73 @@
+import { render } from '@testing-library/angular'
+import { ChangeDetectionStrategy, Component, input } from '@angular/core'
+import { describe, expect, it } from 'vitest'
+import {
+  TanStackAppField,
+  TanStackField,
+  injectField,
+  injectForm,
+} from '../src/index'
+
+describe('TanStackAppField', () => {
+  it('should render a field with the correct label and default value', async () => {
+    @Component({
+      selector: 'app-text-field',
+      changeDetection: ChangeDetectionStrategy.OnPush,
+      standalone: true,
+      template: `
+        <label [for]="field.api.name">{{ label() }}</label>
+        <input
+          [id]="field.api.name"
+          [name]="field.api.name"
+          [value]="field.api.state.value"
+          (blur)="field.api.handleBlur()"
+          (input)="field.api.handleChange($any($event).target.value)"
+        />
+      `,
+    })
+    class AppTextField {
+      label = input.required<string>()
+      field = injectField<string>()
+    }
+
+    @Component({
+      selector: 'app-root',
+      standalone: true,
+      changeDetection: ChangeDetectionStrategy.OnPush,
+      imports: [TanStackField, TanStackAppField, AppTextField],
+      template: `
+        <form (submit)="handleSubmit($event)">
+          <app-text-field
+            label="Last name:"
+            tanstack-app-field
+            [tanstackField]="form"
+            name="lastName"
+          />
+        </form>
+      `,
+    })
+    class AppComponent {
+      form = injectForm({
+        defaultValues: {
+          firstName: '',
+          lastName: 'Doe',
+        },
+        onSubmit({ value }) {
+          console.log(value)
+        },
+      })
+
+      handleSubmit(event: SubmitEvent) {
+        event.preventDefault()
+        event.stopPropagation()
+        this.form.handleSubmit()
+      }
+    }
+
+    const { getByLabelText } = await render(AppComponent)
+
+    const ourInput = getByLabelText('Last name:')
+    expect(ourInput).toBeInTheDocument()
+    expect(ourInput).toHaveValue('Doe')
+  })
+})