docs(angular): use type annotations instead of casting

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<Person> } = { people: [] }
+
   form = injectForm({
-    defaultValues: {
-      people: [] as Array<{ name: string; age: number }>,
-    },
+    defaultValues: this.defaultPeople,
     onSubmit({ value }) {
       alert(JSON.stringify(value))
     },
@@ -93,6 +98,11 @@ export class AppComponent {
 ## Full Example
 
 ```angular-ts
+interface Person {
+  name: string
+  age: number
+}
+
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -135,11 +145,10 @@ export class AppComponent {
 })
 export class AppComponent {
   defaultPerson = { name: '', age: 0 }
+  defaultPeople: { people: Array<Person> } = { people: [] }
 
   form = injectForm({
-    defaultValues: {
-      people: [] as Array<{ name: string; age: number }>,
-    },
+    defaultValues: this.defaultPeople,
     onSubmit({ value }) {
       alert(JSON.stringify(value))
     },

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<Hobby> } = { 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))
     },

docs/framework/angular/guides/validation.md

@@ -222,7 +222,7 @@ It's worth mentioning that our `errors` array and the `errorMap` matches the typ
     >
       <!-- ... -->
       <!-- errorMap.onChange is type `{isOldEnough: false} | undefined` -->
-	  <!-- meta.errors is type `Array<{isOldEnough: false} | undefined>` -->
+      <!-- meta.errors is type `Array<{isOldEnough: false} | undefined>` -->
       @if (!age.api.state.meta.errorMap['onChange']?.isOldEnough) {
         <em role="alert">The user is not old enough</em>
       }

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<Person> } = { people: [] }
 
   form = injectForm({
-    defaultValues: {
-      people: [] as Array<{ name: string; age: number }>,
-    },
+    defaultValues: this.defaultPeople,
     onSubmit({ value }) {
       alert(JSON.stringify(value))
     },