Skip to content

Commit d38ff3f

Browse files
committed
chore: run prettier
1 parent 4cc4f5c commit d38ff3f

File tree

1 file changed

+19
-21
lines changed

1 file changed

+19
-21
lines changed

app/blog/announcing-tanstack-form-v1.md

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -66,16 +66,18 @@ We even support type-checking what errors are returned in `<form.Field>`:
6666

6767
```tsx
6868
<form.Field
69-
name="age"
70-
validators={{onChange: ({value}) => value < 12 ? {tooYoung: true} : undefined}}
71-
children={field => (
72-
<>
73-
<NumberInput value={field.state.value}/>
74-
// TypeScript will correctly tell you that `errorMap.onChange`
75-
// is an object, not a string
76-
<p>{field.state.meta.errorMap.onChange}</p>
77-
</>
78-
)}
69+
name="age"
70+
validators={{
71+
onChange: ({ value }) => (value < 12 ? { tooYoung: true } : undefined),
72+
}}
73+
children={(field) => (
74+
<>
75+
<NumberInput value={field.state.value} />
76+
// TypeScript will correctly tell you that `errorMap.onChange` // is an object,
77+
not a string
78+
<p>{field.state.meta.errorMap.onChange}</p>
79+
</>
80+
)}
7981
/>
8082
```
8183

@@ -123,8 +125,8 @@ That's not all, though! We also support async functions to validate your code; c
123125
name="age"
124126
asyncDebounceMs={500}
125127
validators={{
126-
onBlurAsync: async ({value, signal}) => {
127-
const currentAge = await fetchCurrentAgeOnProfile({signal})
128+
onBlurAsync: async ({ value, signal }) => {
129+
const currentAge = await fetchCurrentAgeOnProfile({ signal })
128130
return value < currentAge ? 'You can only increase the age' : undefined
129131
},
130132
}}
@@ -139,25 +141,22 @@ In fact, if you're using SSR solutions, we even make server-side form validation
139141

140142
```typescript
141143
// app/routes/index.tsx, but can be extracted to any other path
142-
import {
143-
createServerValidate,
144-
getFormData,
145-
} from '@tanstack/react-form/start'
146-
import {yourSchemaHere} from '~/constants/forms';
144+
import { createServerValidate, getFormData } from '@tanstack/react-form/start'
145+
import { yourSchemaHere } from '~/constants/forms'
147146

148147
const serverValidate = createServerValidate({
149148
...formOpts,
150-
onServerValidate: yourSchemaHere
149+
onServerValidate: yourSchemaHere,
151150
})
152151

153152
export const getFormDataFromServer = createServerFn({ method: 'GET' }).handler(
154153
async () => {
155154
return getFormData()
156-
},
155+
}
157156
)
158157
```
159158

160-
> This code sample excludes some of the relevant code to keep things glanceable. [For more details on our SSR integration, please check our docs.](/form/latest/docs/framework/react/guides/ssr)
159+
> This code sample excludes some of the relevant code to keep things glanceable. [For more details on our SSR integration, please check our docs.](/form/latest/docs/framework/react/guides/ssr)
161160
162161
And boom, the exact same validation logic is running on both your frontend and backend. Your forms will even show errors when JavaScript is disabled on the user's browser!
163162

@@ -172,7 +171,6 @@ We're not resting on our laurels, however - we have plans to add new features to
172171

173172
And much more.
174173

175-
176174
# Thank **you**
177175

178176
There's so many people I'd like to thank that once I'd gotten started I'd never end. Instead, I'll address each group of folks I want to thank.

0 commit comments

Comments
 (0)