You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/framework/angular/guides/validation.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ It's up to you! The `[tanstackField]` directive accepts some callbacks as props
15
15
16
16
Here is an example:
17
17
18
-
```typescript
18
+
```angular-ts
19
19
@Component({
20
20
selector: 'app-root',
21
21
standalone: true,
@@ -53,7 +53,7 @@ export class AppComponent {
53
53
54
54
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:
55
55
56
-
```typescript
56
+
```angular-ts
57
57
@Component({
58
58
selector: 'app-root',
59
59
standalone: true,
@@ -94,7 +94,7 @@ export class AppComponent {
94
94
95
95
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:
96
96
97
-
```typescript
97
+
```angular-ts
98
98
@Component({
99
99
selector: 'app-root',
100
100
standalone: true,
@@ -144,7 +144,7 @@ In the example above, we are validating different things on the same field at di
144
144
145
145
Once you have your validation in place, you can map the errors from an array to be displayed in your UI:
146
146
147
-
```typescript
147
+
```angular-ts
148
148
@Component({
149
149
selector: 'app-root',
150
150
standalone: true,
@@ -175,7 +175,7 @@ export class AppComponent {
175
175
176
176
Or use the `errorMap` property to access the specific error you're looking for:
177
177
178
-
```typescript
178
+
```angular-ts
179
179
@Component({
180
180
selector: 'app-root',
181
181
standalone: true,
@@ -210,7 +210,7 @@ As shown above, each `[tanstackField]` accepts its own validation rules via the
210
210
211
211
Example:
212
212
213
-
```typescript
213
+
```angular-ts
214
214
@Component({
215
215
selector: 'app-root',
216
216
standalone: true,
@@ -261,7 +261,7 @@ While we suspect most validations will be synchronous, there are many instances
261
261
262
262
To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods that can be used to validate against:
263
263
264
-
```typescript
264
+
```angular-ts
265
265
@Component({
266
266
selector: 'app-root',
267
267
standalone: true,
@@ -301,7 +301,7 @@ export class AppComponent {
301
301
302
302
Synchronous and Asynchronous validations can coexist. For example, it is possible to define both `onBlur` and `onBlurAsync` on the same field:
303
303
304
-
```typescript
304
+
```angular-ts
305
305
@Component({
306
306
selector: 'app-root',
307
307
standalone: true,
@@ -351,7 +351,7 @@ While async calls are the way to go when validating against the database, runnin
351
351
352
352
Instead, we enable an easy method for debouncing your `async` calls by adding a single property:
353
353
354
-
```html
354
+
```angular-html
355
355
<ng-container
356
356
[tanstackField]="form"
357
357
name="age"
@@ -365,7 +365,7 @@ Instead, we enable an easy method for debouncing your `async` calls by adding a
365
365
366
366
This will debounce every async call with a 500ms delay. You can even override this property on a per-validation property:
Once done, we can add the adapter to the `validator` property on the form or field:
400
400
401
-
```typescript
401
+
```angular-ts
402
402
import { zodValidator } from '@tanstack/zod-form-adapter'
403
403
import { z } from 'zod'
404
404
@@ -434,7 +434,7 @@ export class AppComponent {
434
434
435
435
These adapters also support async operations using the proper property names:
436
436
437
-
```typescript
437
+
```angular-ts
438
438
@Component({
439
439
selector: 'app-root',
440
440
standalone: true,
@@ -477,7 +477,7 @@ The form state object has a `canSubmit` flag that is false when any field is inv
477
477
478
478
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).
Copy file name to clipboardExpand all lines: docs/framework/angular/quick-start.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ title: Quick Start
5
5
6
6
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.
7
7
8
-
```typescript
8
+
```angular-ts
9
9
import { Component } from '@angular/core'
10
10
import { bootstrapApplication } from '@angular/platform-browser'
11
11
import { TanStackField, injectForm } from '@tanstack/angular-form'
0 commit comments