Angular中向Signal表单传递可选载荷值的最佳实践

问题背景 #

我们需要将服务器端HTTP请求的载荷存入Signal表单，相关代码如下：

模型：order.model.ts #

export interface Case {
    referencenumber?: string; // <- 可选属性
}

export interface Order  {
    case?: Case; // <- 可选属性
}

组件：Order-edit.ts #

export class Orderedit {

    [...]

    OrderModel = signal<Order>({
        case: {
            referencenumber: ''
        }
    });

    OrderForm = form(this.OrderModel);

    ngOnInit(): void {
        
        [...]

        this.subscriptions$.add(
        this.store.select(OrderFeature.selectCurrentOrder).pipe(filter((Order): Order is Order => Order != null)).subscribe((Order) => {
            this.patchForm(Order);
        }));

        [...]
    }

    patchForm(Order: Order) {
        this.OrderForm().value.set(Order);
    }

    [...]
}

视图：Order-edit.html #

<form class="ap-form">
    <mat-form-field appearance="outline"> 
        <mat-label>参考编号</mat-label>
        <input matInput [formField]="OrderForm.case.referencenumber"/>
    </mat-form-field>
</form>

问题描述 #

Visual Studio Code中以下代码行被标红：

[formField]="OrderForm.case.referencenumber"

提示信息：Cannot invoke an object which is possibly 'undefined'.
原因是模型中的case和referencenumber都是可选属性，但[formField]不允许绑定可能为undefined的属性。目前临时解决方法是添加非空断言操作符，但不够优雅：

[formField]="OrderForm.case!.referencenumber!"

请问是否需要新增一个order.formmodel层，通过映射Order模型为可选属性赋值有效默认值？最佳实践是什么？

解决方案与最佳实践 #

1. 新增表单专用模型层（推荐） #

将业务模型和表单模型分离，表单模型保证所有表单绑定的属性都有默认值，既避免可选属性带来的类型问题，也能隔离业务逻辑和表单逻辑的变化。

实现步骤：

• 创建表单专用模型，确保所有表单需要的属性为必填且带默认值
• 编写业务模型到表单模型的映射函数

代码示例：

// order.form-model.ts
export interface OrderFormModel {
    case: {
        referencenumber: string;
    };
}

// 映射业务Order到表单模型
export function mapOrderToFormModel(order: Order): OrderFormModel {
    return {
        case: {
            referencenumber: order.case?.referencenumber ?? ''
        }
    };
}

组件修改：

export class Orderedit {
    // 用表单专用模型初始化Signal
    OrderModel = signal<OrderFormModel>({
        case: {
            referencenumber: ''
        }
    });

    OrderForm = form(this.OrderModel);

    [...]

    patchForm(order: Order) {
        // 先映射为表单模型再赋值
        const formModel = mapOrderToFormModel(order);
        this.OrderForm().value.set(formModel);
    }
}

视图无需断言：

<input matInput [formField]="OrderForm.case.referencenumber"/>

2. 优化初始Signal值与patch逻辑 #

若不想新增单独的表单模型层，可在组件内部确保Signal的初始值和patch后的状态始终包含完整的属性结构，从根源上消除undefined的可能。

组件修改：

export class Orderedit {
    // 初始值确保结构完整
    OrderModel = signal<Order>({
        case: {
            referencenumber: ''
        }
    });

    OrderForm = form(this.OrderModel);

    [...]

    patchForm(order: Order) {
        // patch时补全缺失的可选属性
        const patchedOrder: Order = {
            case: {
                referencenumber: order.case?.referencenumber ?? this.OrderModel().case?.referencenumber ?? ''
            },
            // 其他Order属性同理补全
            ...order
        };
        this.OrderForm().value.set(patchedOrder);
    }
}

这种方式无需额外模型文件，但需手动处理每个可选属性，适合结构简单的模型。

3. 类型层面的安全处理 #

若希望保留原业务模型的可选性，同时在模板中避免非空断言，可通过组件属性暴露安全的表单路径：

组件新增属性：

export class Orderedit {
    [...]

    get referenceNumberField() {
        return this.OrderForm.case?.referencenumber ?? (this.OrderForm.case = { referencenumber: '' });
    }
}

视图中使用：

<input matInput [formField]="referenceNumberField"/>

这种方式通过getter确保返回的字段永远存在，同时隐藏内部空值处理逻辑，模板代码更简洁。

内容的提问来源于stack exchange，提问作者Simon