From c2a6ccf99a22d97dfafcb0bde79b1af0d6a317dd Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Thu, 17 Apr 2025 19:20:19 +0200 Subject: [PATCH 1/3] docs(angular): use type annotations instead of casting --- docs/framework/angular/guides/arrays.md | 23 ++++++++++++++----- .../angular/guides/basic-concepts.md | 15 ++++++------ examples/angular/array/angular.json | 3 +++ .../angular/array/src/app/app.component.ts | 12 ++++++---- 4 files changed, 36 insertions(+), 17 deletions(-) diff --git a/docs/framework/angular/guides/arrays.md b/docs/framework/angular/guides/arrays.md index a77307785..285f2a865 100644 --- a/docs/framework/angular/guides/arrays.md +++ b/docs/framework/angular/guides/arrays.md @@ -10,6 +10,11 @@ TanStack Form supports arrays as values in a form, including sub-object values i To use an array, you can use `field.api.state.value` on an array value: ```angular-ts +interface Person { + name: string + age: number +} + @Component({ selector: 'app-root', standalone: true, @@ -25,10 +30,10 @@ To use an array, you can use `field.api.state.value` on an array value: `, }) export class AppComponent { + defaultPeople: { people: Array } = { people: [] } + form = injectForm({ - defaultValues: { - people: [] as Array<{ name: string; age: number }>, - }, + defaultValues: this.defaultPeople, onSubmit({ value }) { alert(JSON.stringify(value)) }, @@ -133,13 +138,19 @@ export class AppComponent { `, }) + +interface Person { + name: string + age: number +} + +const defaultPeople: { people: Array } = { people: [] } + export class AppComponent { defaultPerson = { name: '', age: 0 } form = injectForm({ - defaultValues: { - people: [] as Array<{ name: string; age: number }>, - }, + defaultValues: defaultPeople, onSubmit({ value }) { alert(JSON.stringify(value)) }, diff --git a/docs/framework/angular/guides/basic-concepts.md b/docs/framework/angular/guides/basic-concepts.md index 551d34b12..6d36f08fb 100644 --- a/docs/framework/angular/guides/basic-concepts.md +++ b/docs/framework/angular/guides/basic-concepts.md @@ -239,6 +239,12 @@ When working with array fields, you can use the fields `pushValue`, `removeValue Example: ```angular-ts +interface Hobby { + name: string + description: string + yearsOfExperience: number +} + @Component({ selector: 'app-root', standalone: true, @@ -311,18 +317,13 @@ export class AppComponent { description: '', yearsOfExperience: 0, } + defaultHobbies: { hobbies: Array } = { hobbies: [] } getHobbyName = (idx: number) => `hobbies[${idx}].name` as const; getHobbyDesc = (idx: number) => `hobbies[${idx}].description` as const; form = injectForm({ - defaultValues: { - hobbies: [] as Array<{ - name: string - description: string - yearsOfExperience: number - }>, - }, + defaultValues: this.defaultHobbies, onSubmit({ value }) { alert(JSON.stringify(value)) }, diff --git a/examples/angular/array/angular.json b/examples/angular/array/angular.json index 0cc433f7f..27a423bce 100644 --- a/examples/angular/array/angular.json +++ b/examples/angular/array/angular.json @@ -74,5 +74,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/examples/angular/array/src/app/app.component.ts b/examples/angular/array/src/app/app.component.ts index f2a7b1eb3..a325c70d4 100644 --- a/examples/angular/array/src/app/app.component.ts +++ b/examples/angular/array/src/app/app.component.ts @@ -1,6 +1,11 @@ import { Component } from '@angular/core' import { TanStackField, injectForm, injectStore } from '@tanstack/angular-form' +interface Person { + name: string + age: number +} + @Component({ selector: 'app-root', standalone: true, @@ -42,12 +47,11 @@ import { TanStackField, injectForm, injectStore } from '@tanstack/angular-form' `, }) export class AppComponent { - defaultPerson = { name: '', age: 0 } + defaultPerson: Person = { name: '', age: 0 } + defaultPeople: { people: Array } = { people: [] } form = injectForm({ - defaultValues: { - people: [] as Array<{ name: string; age: number }>, - }, + defaultValues: this.defaultPeople, onSubmit({ value }) { alert(JSON.stringify(value)) }, From 9fbe2d370a2d0c3e7aa5d45ff29c87702028bfb6 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Sun, 20 Apr 2025 21:37:14 +0200 Subject: [PATCH 2/3] chore: minor fix --- docs/framework/angular/guides/arrays.md | 16 +++++++--------- docs/framework/angular/guides/validation.md | 2 +- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/docs/framework/angular/guides/arrays.md b/docs/framework/angular/guides/arrays.md index 285f2a865..afae00d0b 100644 --- a/docs/framework/angular/guides/arrays.md +++ b/docs/framework/angular/guides/arrays.md @@ -98,6 +98,11 @@ export class AppComponent { ## Full Example ```angular-ts +interface Person { + name: string + age: number +} + @Component({ selector: 'app-root', standalone: true, @@ -138,19 +143,12 @@ export class AppComponent { `, }) - -interface Person { - name: string - age: number -} - -const defaultPeople: { people: Array } = { people: [] } - export class AppComponent { defaultPerson = { name: '', age: 0 } + defaultPeople: { people: Array } = { people: [] } form = injectForm({ - defaultValues: defaultPeople, + defaultValues: this.defaultPeople, onSubmit({ value }) { alert(JSON.stringify(value)) }, diff --git a/docs/framework/angular/guides/validation.md b/docs/framework/angular/guides/validation.md index 608817624..6de5811fa 100644 --- a/docs/framework/angular/guides/validation.md +++ b/docs/framework/angular/guides/validation.md @@ -222,7 +222,7 @@ It's worth mentioning that our `errors` array and the `errorMap` matches the typ > - + @if (!age.api.state.meta.errorMap['onChange']?.isOldEnough) { The user is not old enough } From 7623b6855ee6918d2be812288be936693cc90ac8 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Sun, 20 Apr 2025 21:40:11 +0200 Subject: [PATCH 3/3] fix: remove unintended line --- examples/angular/array/angular.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/examples/angular/array/angular.json b/examples/angular/array/angular.json index 27a423bce..0cc433f7f 100644 --- a/examples/angular/array/angular.json +++ b/examples/angular/array/angular.json @@ -74,8 +74,5 @@ } } } - }, - "cli": { - "analytics": false } }