docs: add new signal forms schema guide#68064
docs: add new signal forms schema guide#68064bencodezen wants to merge 3 commits intoangular:mainfrom
Conversation
|
Deployed adev-preview for 8a06669 to: https://ng-dev-previews-fw--pr-angular-angular-68064-adev-prev-bpw5n5jl.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
michael-small
left a comment
There was a problem hiding this comment.
Good stuff, thank you for this and all the other guides
|
|
||
| When you pass a schema function to `form()`, that function _runs once_ during form creation. Its job is to set up the form's logic tree by declaring which fields have validation, which fields are disabled, and which fields depend on other fields. This is the **structural layer** of your form. | ||
|
|
||
| Inside a schema function, you call rule functions such as `disabled()` and `validate()`. These rule functions accept reactive logic that recomputes whenever the signals they reference change. Other rules like `required()` accept optional configuration, including a `when` function that conditionally activates the rule. Together, these form the **behavioral layer** of your form during runtime. |
There was a problem hiding this comment.
@alxhub will be making the way conditional rules are applied more consistent: Experimental Signal Forms.
We might want to adjust these documents to reflect the intended end state.
| profileForm = form(this.profileModel, (schemaPath) => { | ||
| required(schemaPath.age); | ||
|
|
||
| apply(schemaPath.name, (name) => { |
There was a problem hiding this comment.
I don't think there's a compelling reason to demonstrate an inline schema with apply(), since you could always unnest the schema inline:
profileForm = form(this.profileModel, (schemaPath) => {
required(schemaPath.age);
required(schemaPath.name.first);
required(schemaPath.name.last);
});| For forms with multiple levels of nesting, you can call `apply()` inside another `apply()`. Each level scopes the schema function to that part of the tree: | ||
|
|
||
| ```ts | ||
| orderForm = form(this.orderModel, (schemaPath) => { |
There was a problem hiding this comment.
Same point as my previous comment. Even if the argument is to reduce repetition, you could simply use a local variable to achieve the same effect:
orderForm = form(this.orderModel, (order) => {
const billing = order.billing;
required(billing.method);
const address = billing.address;
required(address.street);
required(address.city);
required(address.zip);
});
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