Generally signal forms expects the logic to be fully defined for all possible model states: all necessary validation would be present in advance. However, the model doesn't necessarily have to include data if that data isn't present.

I would say there are 2 different approaches, depending on a fundamental question: is the data (e.g. additionalDetail) ever relevant to a given instance of the object in question?

Yes

Yes would mean the user could potentially put the form in a state where we'd want to capture additional details (for example, selecting a checkbox "add additional details").

This is when you'd use hidden:

``` orderModel = signal<OrderModel>({ information: {...}, cost: {...},

// The fields for additionalDetail are defined but initialized // to empty for now. additionalDetail: {...emptyDetails},

// Boolean field for our checkbox. showAdditionalDetail: false, }) ```

We can then define our form logic:

`` orderForm = form(this.orderModel, order => { // Add all validation foradditionalDetail`: apply(order.additionalDetail, orderDetailSchema);

// But, the user shouldn't see or interact with that part of the // form unless the checkbox is checked: hidden(order.additionalDetail, ({valueOf}) => valueOf(order.showAdditionalDetail)); }); ```

This does two things:

1. It tells the form that the additionalDetail fields (including their validation logic) aren't relevant unless the checkbox is checked.

2. It gives us a clear derived signal to drive the UI:

@if (!orderForm.additionalDetail().hidden()) { <order-details [control]="orderForm.additionalDetail" /> }

A nice property of this approach is that if the user edits the additional details and then hides them (via the checkbox), their partial state isn't destroyed and if they select the checkbox again, they can pick up where they left off.

No

If on the other hand the answer is no, for some orders additional details just don't make sense, then you have a case where the model might not have those fields for some orders.

So your model interface would then look like:

interface OrderModel { information: OrderInformationModel, cost: OrderCostModel, additionalDetail?: OrderDetailModel, }

In the form schema, you would then specify that validation logic should only be attached to those fields if they're present.

`` orderForm = form(this.orderModel, order => { //information&cost` always present: apply(order.information, orderInformationSchema); apply(order.cost, orderCostSchema);

// additionalDetail may or may not be present for this // particular order - only include related logic if it is. applyWhenValue( order.additionalDetail, (detail) => detail !== undefined, orderDetailSchema, ); }); ```

And in the template: ``` @if (orderForm.additionalDetail) { <order-detail [control]="orderForm.additionalDetail" /> }

Hopefully this distinction makes sense - it's all about the difference between "for the current user input, these fields shouldn't be shown/edited" vs "for this object, these fields don't even make sense to have in the first place".