Skip to content

Commit 52db738

Browse files
brodienguyenbrodienguyen
committed
refactor(form-helper): remove $ prefix from form usage
Refactor all usages of the $form store to direct form variable access in Svelte FormHelper test components. This aligns with updated form handling patterns and improves code clarity.
1 parent 56e25a8 commit 52db738

File tree

5 files changed

+67
-67
lines changed

5 files changed

+67
-67
lines changed

‎packages/svelte5/test-app/Pages/FormHelper/Nested.svelte‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,55 +18,55 @@
1818
})
1919
2020
const submit = () => {
21-
$form.submit('post', '/dump/post')
21+
form.submit('post', '/dump/post')
2222
}
2323
</script>
2424

2525
<div>
2626
<label>
2727
Full Name
28-
<input type="text" id="name" bind:value={$form.name} />
28+
<input type="text" id="name" bind:value={form.name} />
2929
</label>
3030
<label>
3131
Street
32-
<input type="text" id="street" bind:value={$form.address.street} />
32+
<input type="text" id="street" bind:value={form.address.street} />
3333
</label>
3434
<label>
3535
City
36-
<input type="text" id="city" bind:value={$form.address.city} />
36+
<input type="text" id="city" bind:value={form.address.city} />
3737
</label>
3838
<label>
3939
Foo
40-
<input type="checkbox" id="foo" value="foo" bind:group={$form.checked} />
40+
<input type="checkbox" id="foo" value="foo" bind:group={form.checked} />
4141
</label>
4242
<label>
4343
Bar
44-
<input type="checkbox" id="bar" value="bar" bind:group={$form.checked} />
44+
<input type="checkbox" id="bar" value="bar" bind:group={form.checked} />
4545
</label>
4646
<label>
4747
Baz
48-
<input type="checkbox" id="baz" value="baz" bind:group={$form.checked} />
48+
<input type="checkbox" id="baz" value="baz" bind:group={form.checked} />
4949
</label>
5050
<label>
5151
Organization Name
52-
<input type="text" id="organization-name" bind:value={$form.organization.name} />
52+
<input type="text" id="organization-name" bind:value={form.organization.name} />
5353
</label>
5454
<label>
5555
Repository Name
56-
<input type="text" id="repo-name" bind:value={$form.organization.repo.name} />
56+
<input type="text" id="repo-name" bind:value={form.organization.repo.name} />
5757
</label>
5858
Repository Tags
5959
<label>
6060
v0.1
61-
<input type="checkbox" id="tag-0" value="v0.1" bind:group={$form.organization.repo.tags} />
61+
<input type="checkbox" id="tag-0" value="v0.1" bind:group={form.organization.repo.tags} />
6262
</label>
6363
<label>
6464
v0.2
65-
<input type="checkbox" id="tag-1" value="v0.2" bind:group={$form.organization.repo.tags} />
65+
<input type="checkbox" id="tag-1" value="v0.2" bind:group={form.organization.repo.tags} />
6666
</label>
6767
<label>
6868
v0.3
69-
<input type="checkbox" id="tag-2" value="v0.3" bind:group={$form.organization.repo.tags} />
69+
<input type="checkbox" id="tag-2" value="v0.3" bind:group={form.organization.repo.tags} />
7070
</label>
7171
<button on:click={submit} class="submit">Submit form</button>
7272
</div>

‎packages/svelte5/test-app/Pages/FormHelper/TypeScript/Data.svelte‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@
1515
}
1616
1717
const form = useForm<FormData>(defaultData)
18-
$form.name = 'John Doe'
19-
$form.company.name = 'Acme Corp'
20-
$form.users = [{ name: 'Jane Doe' }]
18+
form.name = 'John Doe'
19+
form.company.name = 'Acme Corp'
20+
form.users = [{ name: 'Jane Doe' }]
2121
// @ts-expect-error - A form has no email field
22-
$form.email = '[email protected]'
22+
form.email = '[email protected]'
2323
// @ts-expect-error - A company has no street field
24-
$form.company.street = '123 Main St'
24+
form.company.street = '123 Main St'
2525
// @ts-expect-error - A company has no street field
26-
$form.company = { name: 'Acme Corp', street: '123 Main St' }
26+
form.company = { name: 'Acme Corp', street: '123 Main St' }
2727
// @ts-expect-error - A form has no email field
28-
$form.users = [{ name: 'Jane Doe', email: '[email protected]' }]
28+
form.users = [{ name: 'Jane Doe', email: '[email protected]' }]
2929
</script>

‎packages/svelte5/test-app/Pages/FormHelper/TypeScript/DynamicInputName.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
const handleChange = (e: Event) => {
1515
const target = e.target as HTMLInputElement
1616
const { name, value } = target
17-
$form[name] = value
17+
form[name] = value
1818
}
1919
</script>
2020

21-
<input name="name" type="text" value={$form.name} on:input={handleChange} />
21+
<input name="name" type="text" value={form.name} on:input={handleChange} />

‎packages/svelte5/test-app/Pages/FormHelper/TypeScript/Errors.svelte‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -21,66 +21,66 @@
2121
form.errors['company.name']
2222
2323
// Clear Errors
24-
$form.clearErrors('name')
25-
$form.clearErrors('company')
26-
$form.clearErrors('company.name')
27-
$form.clearErrors('users')
28-
$form.clearErrors('users.0')
29-
$form.clearErrors('users.0.name')
24+
form.clearErrors('name')
25+
form.clearErrors('company')
26+
form.clearErrors('company.name')
27+
form.clearErrors('users')
28+
form.clearErrors('users.0')
29+
form.clearErrors('users.0.name')
3030
3131
// Reset and Clear Errors
32-
$form.resetAndClearErrors('name')
33-
$form.resetAndClearErrors('company')
34-
$form.resetAndClearErrors('company.name')
35-
$form.resetAndClearErrors('users')
36-
$form.resetAndClearErrors('users.0')
37-
$form.resetAndClearErrors('users.0.name')
32+
form.resetAndClearErrors('name')
33+
form.resetAndClearErrors('company')
34+
form.resetAndClearErrors('company.name')
35+
form.resetAndClearErrors('users')
36+
form.resetAndClearErrors('users.0')
37+
form.resetAndClearErrors('users.0.name')
3838
3939
// Set error by key
40-
$form.setError('name', 'Validation error')
41-
$form.setError('company', 'Validation error')
42-
$form.setError('company.name', 'Validation error')
43-
$form.setError('users', 'Validation error')
44-
$form.setError('users.0', 'Validation error')
45-
$form.setError('users.0.name', 'Validation error')
40+
form.setError('name', 'Validation error')
41+
form.setError('company', 'Validation error')
42+
form.setError('company.name', 'Validation error')
43+
form.setError('users', 'Validation error')
44+
form.setError('users.0', 'Validation error')
45+
form.setError('users.0.name', 'Validation error')
4646
4747
// Set error by object
48-
$form.setError({ name: 'Validation error' })
49-
$form.setError({ company: 'Validation error' })
50-
$form.setError({ 'company.name': 'Validation error' })
51-
$form.setError({ users: 'Validation error' })
52-
$form.setError({ 'users.0': 'Validation error' })
53-
$form.setError({ 'users.0.name': 'Validation error' })
48+
form.setError({ name: 'Validation error' })
49+
form.setError({ company: 'Validation error' })
50+
form.setError({ 'company.name': 'Validation error' })
51+
form.setError({ users: 'Validation error' })
52+
form.setError({ 'users.0': 'Validation error' })
53+
form.setError({ 'users.0.name': 'Validation error' })
5454
5555
// @ts-expect-error - Form has no email field
5656
form.errors.email
5757
// @ts-expect-error - Company has no email field
5858
form.errors['company.email']
5959
6060
// @ts-expect-error - Form has no email field
61-
$form.clearErrors('email')
61+
form.clearErrors('email')
6262
// @ts-expect-error - Form has no email field
63-
$form.resetAndClearErrors('email')
63+
form.resetAndClearErrors('email')
6464
// @ts-expect-error - Form has no email field
65-
$form.setError('email', 'Validation error')
65+
form.setError('email', 'Validation error')
6666
// @ts-expect-error - Form has no email field
67-
$form.setError({ email: 'Validation error' })
67+
form.setError({ email: 'Validation error' })
6868
6969
// @ts-expect-error - Company has no email field
70-
$form.clearErrors('company.email')
70+
form.clearErrors('company.email')
7171
// @ts-expect-error - Company has no email field
72-
$form.resetAndClearErrors('company.email')
72+
form.resetAndClearErrors('company.email')
7373
// @ts-expect-error - Company has no email field
74-
$form.setError('company.email', 'Validation error')
74+
form.setError('company.email', 'Validation error')
7575
// @ts-expect-error - Company has no email field
76-
$form.setError({ 'company.email': 'Validation error' })
76+
form.setError({ 'company.email': 'Validation error' })
7777
7878
// @ts-expect-error - A user has no email field
79-
$form.clearErrors('users.0.email')
79+
form.clearErrors('users.0.email')
8080
// @ts-expect-error - A user has no email field
81-
$form.resetAndClearErrors('users.0.email')
81+
form.resetAndClearErrors('users.0.email')
8282
// @ts-expect-error - A user has no email field
83-
$form.setError('users.0.email', 'Validation error')
83+
form.setError('users.0.email', 'Validation error')
8484
// @ts-expect-error - A user has no email field
85-
$form.setError({ 'users.0.email': 'Validation error' })
85+
form.setError({ 'users.0.email': 'Validation error' })
8686
</script>

‎packages/svelte5/test-app/Pages/Remember/FormHelper/Default.svelte‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,31 @@
1010
})
1111
1212
const submit = () => {
13-
$form.post('/remember/form-helper/default')
13+
form.post('/remember/form-helper/default')
1414
}
1515
</script>
1616

1717
<div>
1818
<label>
1919
Full Name
20-
<input type="text" id="name" name="name" bind:value={$form.name} />
20+
<input type="text" id="name" name="name" bind:value={form.name} />
2121
</label>
22-
{#if $form.errors.name}
23-
<span class="name_error">{$form.errors.name}</span>
22+
{#if form.errors.name}
23+
<span class="name_error">{form.errors.name}</span>
2424
{/if}
2525
<label>
2626
Handle
27-
<input type="text" id="handle" name="handle" bind:value={$form.handle} />
27+
<input type="text" id="handle" name="handle" bind:value={form.handle} />
2828
</label>
29-
{#if $form.errors.handle}
30-
<span class="handle_error">{$form.errors.handle}</span>
29+
{#if form.errors.handle}
30+
<span class="handle_error">{form.errors.handle}</span>
3131
{/if}
3232
<label>
3333
Remember Me
34-
<input type="checkbox" id="remember" name="remember" bind:checked={$form.remember} />
34+
<input type="checkbox" id="remember" name="remember" bind:checked={form.remember} />
3535
</label>
36-
{#if $form.errors.remember}
37-
<span class="remember_error">{$form.errors.remember}</span>
36+
{#if form.errors.remember}
37+
<span class="remember_error">{form.errors.remember}</span>
3838
{/if}
3939
<label>
4040
Untracked

0 commit comments

Comments
 (0)