analogjs / analog

The fullstack meta-framework for Angular. Powered by Vite and Nitro
https://analogjs.org
MIT License
2.59k stars 250 forks source link

feat(router): introduce server support for form actions #1346

Closed brandonroberts closed 1 month ago

brandonroberts commented 2 months ago

PR Checklist

Closes #935

What is the new behavior?

In .server.ts files, an action function can be defined to be used with forms to progressively enhance forms and build the foundation for handling form actions on the server.

// newsletter.server.ts
import {
  type PageServerAction,
  redirect,
  json,
  fail,
} from '@analogjs/router/server/actions';
import { readFormData } from 'h3';

export function load() {
  return {
    loaded: true,
  };
}

export async function action({ event }: PageServerAction) {
  const body = await readFormData(event);
  const email = body.get('email') as string;

  if (!email) {
    return fail(422, { email: 'Email is required' });
  }

  if (email.length < 10) {
    return redirect('/');
  }

  console.log({ email: body.get('email') });

  return json({ type: 'success' });
}

A follow-up PR will land to add a form directive to bridge the form to the form server action.

Does this PR introduce a breaking change?

Other information

[optional] What gif best describes this PR or how it makes you feel?

netlify[bot] commented 2 months ago

Deploy Preview for analog-blog ready!

Name Link
Latest commit 9eaafadaab625233cb23136f519af6af6e7bb608
Latest deploy log https://app.netlify.com/sites/analog-blog/deploys/66f1cb87d3ff5900083738bd
Deploy Preview https://deploy-preview-1346--analog-blog.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 2 months ago

Deploy Preview for analog-docs ready!

Name Link
Latest commit 9eaafadaab625233cb23136f519af6af6e7bb608
Latest deploy log https://app.netlify.com/sites/analog-docs/deploys/66f1cb87c04f02000874c0fe
Deploy Preview https://deploy-preview-1346--analog-docs.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 2 months ago

Deploy Preview for analog-app ready!

Name Link
Latest commit 9eaafadaab625233cb23136f519af6af6e7bb608
Latest deploy log https://app.netlify.com/sites/analog-app/deploys/66f1cb87ade99f0008e921f7
Deploy Preview https://deploy-preview-1346--analog-app.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 2 months ago

Deploy Preview for analog-ng-app ready!

Name Link
Latest commit 9eaafadaab625233cb23136f519af6af6e7bb608
Latest deploy log https://app.netlify.com/sites/analog-ng-app/deploys/66f1cb873e5c190008a0d55c
Deploy Preview https://deploy-preview-1346--analog-ng-app.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

jdgamble555 commented 2 months ago

whahoo!