Skip to content

Commit 4fb15b4

Browse files
authored
docs: update the syntax highlighting for angular (#869)
1 parent bbf9f46 commit 4fb15b4

File tree

4 files changed

+23
-23
lines changed

4 files changed

+23
-23
lines changed

docs/framework/angular/guides/arrays.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ TanStack Form supports arrays as values in a form, including sub-object values i
99

1010
To use an array, you can use `field.api.state.value` on an array value:
1111

12-
```typescript
12+
```angular-ts
1313
@Component({
1414
selector: 'app-root',
1515
standalone: true,
@@ -38,15 +38,15 @@ export class AppComponent {
3838

3939
This will generate the mapped JSX every time you run `pushValue` on `field`:
4040

41-
```html
41+
```angular-html
4242
<button (click)="people.api.pushValue(defaultPerson)" type="button">
4343
Add person
4444
</button>
4545
```
4646

4747
Finally, you can use a subfield like so:
4848

49-
```html
49+
```angular-html
5050
<ng-container
5151
[tanstackField]="form"
5252
[name]="getPeopleName($index)"
@@ -79,7 +79,7 @@ export class AppComponent {
7979
> While it's unfortunate that you need to use a function to get the field name, it's a requirement for how our strict TypeScript types work.
8080
>
8181
> See, if we did the following:
82-
> ```html
82+
> ```angular-html
8383
> <ng-container [tanstackField]="form" [name]="'people[' + $index + '].name'"></ng-container>
8484
> ```
8585
>
@@ -91,7 +91,7 @@ export class AppComponent {
9191
9292
## Full Example
9393
94-
```typescript
94+
```angular-ts
9595
@Component({
9696
selector: 'app-root',
9797
standalone: true,

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ The Field API is an object accessed in the `tanstackField.api` property when cre
5858

5959
Example:
6060

61-
```html
61+
```angular-html
6262
<input
6363
[value]="fieldName.api.state.value"
6464
(blur)="fieldName.api.handleBlur()"
@@ -72,7 +72,7 @@ Example:
7272

7373
Example:
7474

75-
```typescript
75+
```angular-ts
7676
@Component({
7777
selector: 'app-root',
7878
standalone: true,
@@ -120,7 +120,7 @@ In addition to hand-rolled validation options, we also provide adapters like `@t
120120

121121
Example:
122122

123-
```typescript
123+
```angular-ts
124124
import { zodValidator } from '@tanstack/zod-form-adapter'
125125
import { z } from 'zod'
126126
@@ -195,7 +195,7 @@ When working with array fields, you can use the fields `pushValue`, `removeValue
195195

196196
Example:
197197

198-
```typescript
198+
```angular-ts
199199
@Component({
200200
selector: 'app-root',
201201
standalone: true,

docs/framework/angular/guides/validation.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ It's up to you! The `[tanstackField]` directive accepts some callbacks as props
1515

1616
Here is an example:
1717

18-
```typescript
18+
```angular-ts
1919
@Component({
2020
selector: 'app-root',
2121
standalone: true,
@@ -53,7 +53,7 @@ export class AppComponent {
5353

5454
In the example above, the validation is done at each keystroke (`onChange`). If, instead, we wanted the validation to be done when the field is blurred, we would change the code above like so:
5555

56-
```typescript
56+
```angular-ts
5757
@Component({
5858
selector: 'app-root',
5959
standalone: true,
@@ -94,7 +94,7 @@ export class AppComponent {
9494

9595
So you can control when the validation is done by implementing the desired callback. You can even perform different pieces of validation at different times:
9696

97-
```typescript
97+
```angular-ts
9898
@Component({
9999
selector: 'app-root',
100100
standalone: true,
@@ -144,7 +144,7 @@ In the example above, we are validating different things on the same field at di
144144

145145
Once you have your validation in place, you can map the errors from an array to be displayed in your UI:
146146

147-
```typescript
147+
```angular-ts
148148
@Component({
149149
selector: 'app-root',
150150
standalone: true,
@@ -175,7 +175,7 @@ export class AppComponent {
175175

176176
Or use the `errorMap` property to access the specific error you're looking for:
177177

178-
```typescript
178+
```angular-ts
179179
@Component({
180180
selector: 'app-root',
181181
standalone: true,
@@ -210,7 +210,7 @@ As shown above, each `[tanstackField]` accepts its own validation rules via the
210210

211211
Example:
212212

213-
```typescript
213+
```angular-ts
214214
@Component({
215215
selector: 'app-root',
216216
standalone: true,
@@ -261,7 +261,7 @@ While we suspect most validations will be synchronous, there are many instances
261261

262262
To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods that can be used to validate against:
263263

264-
```typescript
264+
```angular-ts
265265
@Component({
266266
selector: 'app-root',
267267
standalone: true,
@@ -301,7 +301,7 @@ export class AppComponent {
301301

302302
Synchronous and Asynchronous validations can coexist. For example, it is possible to define both `onBlur` and `onBlurAsync` on the same field:
303303

304-
```typescript
304+
```angular-ts
305305
@Component({
306306
selector: 'app-root',
307307
standalone: true,
@@ -351,7 +351,7 @@ While async calls are the way to go when validating against the database, runnin
351351

352352
Instead, we enable an easy method for debouncing your `async` calls by adding a single property:
353353

354-
```html
354+
```angular-html
355355
<ng-container
356356
[tanstackField]="form"
357357
name="age"
@@ -365,7 +365,7 @@ Instead, we enable an easy method for debouncing your `async` calls by adding a
365365

366366
This will debounce every async call with a 500ms delay. You can even override this property on a per-validation property:
367367

368-
```html
368+
```angular-html
369369
<ng-container
370370
[tanstackField]="form"
371371
name="age"
@@ -398,7 +398,7 @@ $ npm install @tanstack/valibot-form-adapter valibot
398398

399399
Once done, we can add the adapter to the `validator` property on the form or field:
400400

401-
```typescript
401+
```angular-ts
402402
import { zodValidator } from '@tanstack/zod-form-adapter'
403403
import { z } from 'zod'
404404
@@ -434,7 +434,7 @@ export class AppComponent {
434434

435435
These adapters also support async operations using the proper property names:
436436

437-
```typescript
437+
```angular-ts
438438
@Component({
439439
selector: 'app-root',
440440
standalone: true,
@@ -477,7 +477,7 @@ The form state object has a `canSubmit` flag that is false when any field is inv
477477

478478
You can subscribe to it via `injectStore` and use the value in order to, for example, disable the submit button when the form is invalid (in practice, disabled buttons are not accessible, use `aria-disabled` instead).
479479

480-
```typescript
480+
```angular-ts
481481
@Component({
482482
selector: 'app-root',
483483
standalone: true,

docs/framework/angular/quick-start.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ title: Quick Start
55

66
The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet.
77

8-
```typescript
8+
```angular-ts
99
import { Component } from '@angular/core'
1010
import { bootstrapApplication } from '@angular/platform-browser'
1111
import { TanStackField, injectForm } from '@tanstack/angular-form'

0 commit comments

Comments
 (0)