[WIP] Form Groups

docs/framework/angular/guides/arrays.md

@@ -47,7 +47,7 @@ This will generate the mapped JSX every time you run `pushValue` on `field`:
 Finally, you can use a subfield like so:
 
 ```angular-html
- <ng-container
+<ng-container
   [tanstackField]="form"
   [name]="getPeopleName($index)"
   #person="field"
@@ -57,9 +57,7 @@ Finally, you can use a subfield like so:
       <div>Name for person {{ $index }}</div>
       <input
         [value]="person.api.state.value"
-        (input)="
-          person.api.handleChange($any($event).target.value)
-        "
+        (input)="person.api.handleChange($any($event).target.value)"
       />
     </label>
   </div>
@@ -81,7 +79,10 @@ export class AppComponent {
 > See, if we did the following:
 >
 > ```angular-html
-> <ng-container [tanstackField]="form" [name]="'people[' + $index + '].name'"></ng-container>
+> <ng-container
+>   [tanstackField]="form"
+>   [name]="'people[' + $index + '].name'"
+> ></ng-container>
 > ```
 >
 > We'd be running into a TypeScript issue where `"one" + "two"` is `string` rather than the required `"onetwo"` type
@@ -145,8 +146,7 @@ export class AppComponent {
     },
   })
 
-
-  getPeopleName = (idx: number) => `people[${idx}].name` as const;
+  getPeopleName = (idx: number) => `people[${idx}].name` as const
 
   canSubmit = injectStore(this.form, (state) => state.canSubmit)
   isSubmitting = injectStore(this.form, (state) => state.isSubmitting)

docs/framework/angular/guides/basic-concepts.md

@@ -121,20 +121,19 @@ Example:
   `,
 })
 export class AppComponent {
-  firstNameValidator: FieldValidateFn<any, any, string, any> = ({
-                                                                       value,
-                                                                     }) =>
+  firstNameValidator: FieldValidateFn<any, any, string, any> = ({ value }) =>
     !value
       ? 'A first name is required'
       : value.length < 3
         ? 'First name must be at least 3 characters'
         : undefined
 
-  firstNameAsyncValidator: FieldValidateAsyncFn<any, string, any> =
-    async ({ value }) => {
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-      return value.includes('error') && 'No "error" allowed in first name'
-    }
+  firstNameAsyncValidator: FieldValidateAsyncFn<any, string, any> = async ({
+    value,
+  }) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    return value.includes('error') && 'No "error" allowed in first name'
+  }
 
   form = injectForm({
     defaultValues: {
@@ -176,7 +175,7 @@ import { z } from 'zod'
       [validators]="{
         onChange: z.string().min(3, 'First name must be at least 3 characters'),
         onChangeAsyncDebounceMs: 500,
-        onChangeAsync: firstNameAsyncValidator
+        onChangeAsync: firstNameAsyncValidator,
       }"
       #firstName="field"
     >
@@ -343,8 +342,8 @@ export class AppComponent {
     yearsOfExperience: 0,
   }
 
-  getHobbyName = (idx: number) => `hobbies[${idx}].name` as const;
-  getHobbyDesc = (idx: number) => `hobbies[${idx}].description` as const;
+  getHobbyName = (idx: number) => `hobbies[${idx}].name` as const
+  getHobbyDesc = (idx: number) => `hobbies[${idx}].description` as const
 
   form = injectForm({
     defaultValues: {

docs/framework/angular/guides/dynamic-validation.md

@@ -10,15 +10,17 @@ We support this through our `onDynamic` validation function.
 
 ```angular-ts
 import { Component } from '@angular/core'
-import { TanStackField, injectForm, revalidateLogic } from '@tanstack/angular-form'
+import {
+  TanStackField,
+  injectForm,
+  revalidateLogic,
+} from '@tanstack/angular-form'
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [TanStackField],
-  template: `
-    <!-- Your form template here -->
-  `,
+  template: ` <!-- Your form template here --> `,
 })
 export class AppComponent {
   form = injectForm({
@@ -65,9 +67,7 @@ You can, for example, use the following to revalidate on blur after the first su
   selector: 'app-root',
   standalone: true,
   imports: [TanStackField],
-  template: `
-    <!-- Your form template here -->
-  `,
+  template: ` <!-- Your form template here --> `,
 })
 export class AppComponent {
   form = injectForm({
@@ -87,15 +87,18 @@ Just as you might access errors from an `onChange` or `onBlur` validation, you c
 
 ```angular-ts
 import { Component } from '@angular/core'
-import { TanStackField, injectForm, injectStore, revalidateLogic } from '@tanstack/angular-form'
+import {
+  TanStackField,
+  injectForm,
+  injectStore,
+  revalidateLogic,
+} from '@tanstack/angular-form'
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [TanStackField],
-  template: `
-    <p>{{ formErrorMap().onDynamic?.firstName }}</p>
-  `,
+  template: ` <p>{{ formErrorMap().onDynamic?.firstName }}</p> `,
 })
 export class AppComponent {
   form = injectForm({
@@ -121,7 +124,12 @@ You can use `onDynamic` validation alongside other validation logic, such as `on
 
 ```angular-ts
 import { Component } from '@angular/core'
-import { TanStackField, injectForm, injectStore, revalidateLogic } from '@tanstack/angular-form'
+import {
+  TanStackField,
+  injectForm,
+  injectStore,
+  revalidateLogic,
+} from '@tanstack/angular-form'
 
 @Component({
   selector: 'app-root',
@@ -167,7 +175,11 @@ You can also use `onDynamic` validation with fields, just like you would with ot
 
 ```angular-ts
 import { Component } from '@angular/core'
-import { TanStackField, injectForm, revalidateLogic } from '@tanstack/angular-form'
+import {
+  TanStackField,
+  injectForm,
+  revalidateLogic,
+} from '@tanstack/angular-form'
 import type { FieldValidateFn } from '@tanstack/angular-form'
 
 @Component({
@@ -180,7 +192,7 @@ import type { FieldValidateFn } from '@tanstack/angular-form'
         [tanstackField]="form"
         name="age"
         [validators]="{
-          onDynamic: ageValidator
+          onDynamic: ageValidator,
         }"
         #age="field"
       >
@@ -229,15 +241,17 @@ Async validation can also be used with `onDynamic` just like with other validati
 
 ```angular-ts
 import { Component } from '@angular/core'
-import { TanStackField, injectForm, revalidateLogic } from '@tanstack/angular-form'
+import {
+  TanStackField,
+  injectForm,
+  revalidateLogic,
+} from '@tanstack/angular-form'
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [TanStackField],
-  template: `
-    <!-- Your form template here -->
-  `,
+  template: ` <!-- Your form template here --> `,
 })
 export class AppComponent {
   form = injectForm({
@@ -266,16 +280,18 @@ You can also use standard schema validation libraries like Valibot or Zod with `
 
 ```angular-ts
 import { Component } from '@angular/core'
-import { TanStackField, injectForm, revalidateLogic } from '@tanstack/angular-form'
+import {
+  TanStackField,
+  injectForm,
+  revalidateLogic,
+} from '@tanstack/angular-form'
 import { z } from 'zod'
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [TanStackField],
-  template: `
-    <!-- Your form template here -->
-  `,
+  template: ` <!-- Your form template here --> `,
 })
 export class AppComponent {
   schema = z.object({

docs/framework/angular/guides/form-composition.md

@@ -21,11 +21,7 @@ import { TanStackField, injectForm, injectStore } from '@tanstack/angular-form'
   imports: [TanStackField],
   template: `
     <div>
-      <ng-container
-        [tanstackField]="form"
-        name="firstName"
-        #firstName="field"
-      >
+      <ng-container [tanstackField]="form" name="firstName" #firstName="field">
         <label [for]="firstName.api.name">First Name:</label>
         <input
           [id]="firstName.api.name"
@@ -47,11 +43,7 @@ import { TanStackField, injectForm, injectStore } from '@tanstack/angular-form'
       </ng-container>
     </div>
     <div>
-      <ng-container
-        [tanstackField]="form"
-        name="lastName"
-        #lastName="field"
-      >
+      <ng-container [tanstackField]="form" name="lastName" #lastName="field">
         <label [for]="lastName.api.name">Last Name:</label>
         <input
           [id]="lastName.api.name"
@@ -91,7 +83,7 @@ export class AppComponent {
 This is functionally correct, but introduces a _lot_ of repeated templating behavior over and over. Instead, let's move the error handling, label to input binding, and other repeated logic into a component:
 
 ```angular-ts
-import {injectField} from '@tanstack/angular-form'
+import { injectField } from '@tanstack/angular-form'
 
 @Component({
   selector: 'app-text-field',

docs/framework/angular/guides/listeners.md

@@ -31,7 +31,7 @@ Events that can be "listened" to are:
       [tanstackField]="form"
       name="country"
       [listeners]="{
-        onChange: onCountryChange
+        onChange: onCountryChange,
       }"
       #country="field"
     ></ng-container>
@@ -43,7 +43,6 @@ Events that can be "listened" to are:
     ></ng-container>
   `,
 })
-
 export class AppComponent {
   form = injectForm({
     defaultValues: {

docs/framework/angular/guides/submission-handling.md

@@ -11,30 +11,32 @@ You can accomplish this by specifying the `onSubmitMeta` property. This meta dat
 > Note: if `form.handleSubmit()` is called without metadata, it will use the provided default.
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { injectForm } from '@tanstack/angular-form';
-
+import { Component } from '@angular/core'
+import { injectForm } from '@tanstack/angular-form'
 
 type FormMeta = {
-  submitAction: 'continue' | 'backToMenu' | null;
-};
+  submitAction: 'continue' | 'backToMenu' | null
+}
 
 // Metadata is not required to call form.handleSubmit().
 // Specify what values to use as default if no meta is passed
 const defaultMeta: FormMeta = {
   submitAction: null,
-};
+}
 
 @Component({
   selector: 'app-root',
   template: `
     <form (submit)="handleSubmit($event)">
-      <button type="submit" (click)="
-        handleClick({ submitAction: 'continue' })
-      ">Submit and continue</button>
-      <button type="submit" (click)="
-        handleClick({ submitAction: 'backToMenu' })
-      ">Submit and back to menu</button>
+      <button type="submit" (click)="handleClick({ submitAction: 'continue' })">
+        Submit and continue
+      </button>
+      <button
+        type="submit"
+        (click)="handleClick({ submitAction: 'backToMenu' })"
+      >
+        Submit and back to menu
+      </button>
     </form>
   `,
 })
@@ -47,18 +49,18 @@ export class AppComponent {
     onSubmitMeta: defaultMeta,
     onSubmit: async ({ value, meta }) => {
       // Do something with the values passed via handleSubmit
-      console.log(`Selected action - ${meta.submitAction}`, value);
+      console.log(`Selected action - ${meta.submitAction}`, value)
     },
-  });
+  })
 
   handleSubmit(event: SubmitEvent) {
-    event.preventDefault();
-    event.stopPropagation();
+    event.preventDefault()
+    event.stopPropagation()
   }
 
   handleClick(meta: FormMeta) {
     // Overwrites the default specified in onSubmitMeta
-    this.form.handleSubmit(meta);
+    this.form.handleSubmit(meta)
   }
 }
 ```