SvelteKit local form variable isn't updating after running applyAction

I am trying to build a form that allows users to change their password on my app using SvelteKit's newish form actions. I've followed the docs pretty much to the letter other than changing variable names and such to suit my project, and the weird thing is that $page.form, the global store for that form, updates to the correct values.

So in my Svelte Page i have

const handleChangePasswords: SubmitFunction = () => {
        return async ({ result }) => {
            if (result.type === 'success') {
                invalidateAll();
            } else {
                await applyAction(result);
            }
        };
    };

<form
    class="password-info-form"
    method="POST"
    action="?/changePasswords"
    use:enhance={handleChangePasswords}
>
    <span class="password-info-heading">{editMode ? 'update' : ''} password</span>
    <div class="form-group">
        <label for="first-name">Current Password</label>
        <TextField
            type="password"
            name="currentPassword"
            placeholder="Please enter your current password"
            bind:value={data.oldPassword}
            disabled={!editMode}
        />
    </div>
    <div class="form-group">
        <label for="last-name">New Password</label>
        <TextField
            type="password"
            name="newPassword"
            placeholder="Please enter your new password"
            bind:value={data.newPassword}
            disabled={!editMode}
        />
    </div>
    <div class="form-group full-width">
        <label for="email">Confirm new Password</label>
        <TextField
            type="password"
            name="confirmPassword"
            placeholder="Please enter your new password again"
            bind:value={data.confirmPassword}
            disabled={!editMode}
        />
    </div>
    {#if form?.errors}
        <p class="error">This field is required</p>
    {/if}
    {#if editMode}
        <button class="cancel-button">Cancel</button>
        <button class="save-button" disabled={submitButtonEnabled}>Save changes</button>
    {/if}
</form>

And in my actions object on the server.ts file

changePasswords: async ({ request }) => {
        const passwords: Record<string, string> = {}; // Setting up blank object to hold user profile information

        const formData: FormData = await request.formData();

        const userAuthenticationToken = formData.get('token') as string;
        if (!userAuthenticationToken) {
            return fail(400, { code: 'NO_TOKEN', incorrect: true });
        }

        formData.forEach((value, key) => {
            if (!formData.get(key)) {
                // do we need this check?
                passwords[key as keyof typeof passwords] = '';
            }
            passwords[key as keyof typeof passwords] = value as string;
        });
        // check if we have all the required fields
        if (!passwords.currentPassword || !passwords.newPassword || !passwords.confirmPassword) {
            return fail(400, { code: 'INVALID_INPUT', incorrect: true });
        }

        // check if the new password and confirm password match
        if (passwords.newPassword !== passwords.confirmPassword) {
            console.log('match?');

            return fail(400, {
                code: 'PASSWORDS_DO_NOT_MATCH',
                newPassword: true,
                confirmPassword: true,
                incorrect: true
            });
        }

        return {
            success: true
        };
    }

https://stackoverflow.com/questions/ask#

Can't see anything I'm missing and like I say, the global store for the form is updating so applyActions must be running.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/LRtCm1e