Skip to content

Commit

Permalink
docs: update the syntax highlighting for angular (#869)
Browse files Browse the repository at this point in the history
  • Loading branch information
mgechev authored Jul 19, 2024
1 parent bbf9f46 commit 4fb15b4
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 23 deletions.
10 changes: 5 additions & 5 deletions docs/framework/angular/guides/arrays.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ 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:

```typescript
```angular-ts
@Component({
selector: 'app-root',
standalone: true,
Expand Down Expand Up @@ -38,15 +38,15 @@ export class AppComponent {

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

```html
```angular-html
<button (click)="people.api.pushValue(defaultPerson)" type="button">
Add person
</button>
```

Finally, you can use a subfield like so:

```html
```angular-html
<ng-container
[tanstackField]="form"
[name]="getPeopleName($index)"
Expand Down Expand Up @@ -79,7 +79,7 @@ export class AppComponent {
> 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.
>
> See, if we did the following:
> ```html
> ```angular-html
> <ng-container [tanstackField]="form" [name]="'people[' + $index + '].name'"></ng-container>
> ```
>
Expand All @@ -91,7 +91,7 @@ export class AppComponent {
## Full Example
```typescript
```angular-ts
@Component({
selector: 'app-root',
standalone: true,
Expand Down
8 changes: 4 additions & 4 deletions docs/framework/angular/guides/basic-concepts.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ The Field API is an object accessed in the `tanstackField.api` property when cre

Example:

```html
```angular-html
<input
[value]="fieldName.api.state.value"
(blur)="fieldName.api.handleBlur()"
Expand All @@ -72,7 +72,7 @@ Example:

Example:

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

Example:

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

Example:

```typescript
```angular-ts
@Component({
selector: 'app-root',
standalone: true,
Expand Down
26 changes: 13 additions & 13 deletions docs/framework/angular/guides/validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ It's up to you! The `[tanstackField]` directive accepts some callbacks as props

Here is an example:

```typescript
```angular-ts
@Component({
selector: 'app-root',
standalone: true,
Expand Down Expand Up @@ -53,7 +53,7 @@ export class AppComponent {

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:

```typescript
```angular-ts
@Component({
selector: 'app-root',
standalone: true,
Expand Down Expand Up @@ -94,7 +94,7 @@ export class AppComponent {

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:

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

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

```typescript
```angular-ts
@Component({
selector: 'app-root',
standalone: true,
Expand Down Expand Up @@ -175,7 +175,7 @@ export class AppComponent {

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

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

Example:

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

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

```typescript
```angular-ts
@Component({
selector: 'app-root',
standalone: true,
Expand Down Expand Up @@ -301,7 +301,7 @@ export class AppComponent {

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

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

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

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

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

```html
```angular-html
<ng-container
[tanstackField]="form"
name="age"
Expand Down Expand Up @@ -398,7 +398,7 @@ $ npm install @tanstack/valibot-form-adapter valibot

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

```typescript
```angular-ts
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
Expand Down Expand Up @@ -434,7 +434,7 @@ export class AppComponent {

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

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

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).

```typescript
```angular-ts
@Component({
selector: 'app-root',
standalone: true,
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/angular/quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: Quick Start

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.

```typescript
```angular-ts
import { Component } from '@angular/core'
import { bootstrapApplication } from '@angular/platform-browser'
import { TanStackField, injectForm } from '@tanstack/angular-form'
Expand Down

0 comments on commit 4fb15b4

Please # to comment.