Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update the syntax highlighting for angular #869

Merged
merged 1 commit into from
Jul 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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