docs: add new signal forms - form submission guide#67862
docs: add new signal forms - form submission guide#67862bencodezen wants to merge 1 commit intoangular:mainfrom
Conversation
|
|
||
| The `FormRoot` directive handles three things automatically when bound to a `<form>` element: | ||
|
|
||
| 1. **Sets `novalidate`** — Disables the browser's built-in validation so Signal Forms manages validation instead |
There was a problem hiding this comment.
maybe mention/link what novalidate is ?
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form#novalidate
| 2. **Prevents default** — Stops the browser from navigating on form submission | ||
| 3. **Calls `submit()`** — Triggers the submission flow when the user submits the form | ||
|
|
||
| NOTE: The `FormRoot` directive sets `novalidate` automatically. You do not need to add it manually when using `FormRoot`. |
There was a problem hiding this comment.
nit
| NOTE: The `FormRoot` directive sets `novalidate` automatically. You do not need to add it manually when using `FormRoot`. | |
| NOTE: The `FormRoot` directive sets the `novalidate` attribute on the `form` element automatically. You do not need to add it manually when using `FormRoot`. |
|
Deployed adev-preview for db2220a to: https://ng-dev-previews-fw--pr-angular-angular-67862-adev-prev-npev4evt.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
|
|
||
| The `submit()` function runs through a specific sequence: | ||
|
|
||
| 1. **Mark interactive fields as touched** — This surfaces any validation errors that were hidden because the user hadn't interacted with the field yet. Hidden, disabled, and readonly fields are skipped. |
There was a problem hiding this comment.
Instead of manually enumerating, we can use 1. so Markdown handles it automatically
| } | ||
| ``` | ||
|
|
||
| Side effects like navigation, toast notifications, or resetting the form belong _after_ the `await` — not inside the `action` function. The `action` is for communicating with the server and returning errors. Everything else happens in the calling code. |
There was a problem hiding this comment.
What's the rationale for this rule?
And most importantly, how would one respect it when handling the submission by specifying the submission.action option when defining the form?
There was a problem hiding this comment.
Also, the toast/navigation typically needs information that is obtained inside the action function. So respecting that rule would make code weird:
async onSave() {
let contactId: string | undefined = undefined;
const success = await submit(this.contactForm, async (field) => {
contactId = await fetchContact(field().value());
});
if (success && contactId) {
this.router.navigate(['/confirmation', contactId]);
}
}vs.
async onSave() {
await submit(this.contactForm, async (field) => {
const contactId = await fetchContact(field().value());
this.router.navigate(['/confirmation', contactId]);
});
}| </button> | ||
| ``` | ||
|
|
||
| Once the `action` function succeeds or returns an error, the `submitting()` signal automatically resets back to `false`. |
There was a problem hiding this comment.
Not really related to this PR, but given that multiple concurrent submissions are probably something that should generally be avoided, shouldn't that be handled automatically by the form? I.e. shouldn't the form prevent the action from being called if it's currently submitting (similarly to what it does when the form is invalid)?
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information