严格类型表单生成时如何正确处理undefined与null？

问题背景 #

我正在实现一套支持新建条目（空白表单）和编辑条目（填充已有数据）的Angular表单，要求严格类型校验，但在处理undefined和null时遇到了问题，触发错误：

ERROR TypeError: Cannot read properties of undefined (reading 'enabled')

当前实现思路 #

1. 基础表单控件处理 #

export type SomeControlType01 = 'someOption01' | 'someOption02' | 'someOption03';

export function createSomeControl01( defaultValue? : SomeControlType01 ) : FormControl< SomeControlType01 | null > {
    return new FormControl< SomeControlType01 | null>( defaultValue ?? null );
}

2. 基础表单组处理 #

export interface SomeGroup01Data {
    prop01 : string;
    prop02 : SomeControlType01;
}

export interface SomeGroup01FormGroup {
    prop01 : FormControl< string | null >;
    prop02 : FormControl< SomeControlType01 | null >;
}

export function createSomeGroup01( defaultData? : SomeGroup01Data ) : FormGroup< SomeGroup01FormGroup >{
    return new FormGroup< SomeGroup01FormGroup >({
        prop01 : new FormControl< string | null >( defaultData?.prop01 ?? null ),
        prop02 : createSomeControl01( defaultData ? defaultData.prop02 : undefined )
    });
}

3. 含可选属性的表单组处理 #

export interface SomeGroup02Data {
    propB01? : string;
    propB02  : string;
}

export interface SomeGroup02FormGroup {
    propB01? : FormControl< string | null >;
    propB02  : FormControl< string | null >;
}

export function createSomeGroup02( defaultData? : SomeGroup02Data ) : FormGroup< SomeGroup02FormGroup > {
    const group = new FormGroup< SomeGroup02FormGroup >({
        propB02 : new FormControl< string | null >( defaultData?.propB02 ?? null )
    });

    if(defaultData?.propB01){
        group.addControl( 'propB01', new FormControl< string | null >( defaultData.propB01 ) );
    }

    return group;
}

4. 依赖其他属性的可选字段处理 #

export type FlexiblePropDataType = SomeInterface01 | SomeInterface02 | SomeInterface03 | SomeInterface04;
export type FlexiblePropFormGroupType = FormGroup< SomeInterface01FormGroup > | FormGroup< SomeInterface02FormGroup > | FormGroup< SomeInterface03FormGroup > | FormGroup< SomeInterface04FormGroup >;
export type FlexiblePropOptionsType = 'interface01' | 'interface02' | 'interface03' | 'interface04';

export interface SomeGroup03Data {
    propC01  : string;
    propC02? : FlexiblePropOptionsType;
    propC03? : FlexiblePropDataType;
}

export interface SomeGroup03FormGroup {
    propC01  : FormControl< string | null >;
    propC02? : FormControl< FlexiblePropOptionsType | null >;
    propC03? : FlexiblePropFormGroupType;
}

export function createPropC03Group( propType : FlexiblePropOptionsType, data? : FlexiblePropDataType ) : FlexiblePropFormGroupType {
    switch( propType ) {
        case 'interface01' : return createInterface01( data ?? undefined ); break;
        case 'interface02' : return createInterface02( data ?? undefined ); break;
        case 'interface03' : return createInterface03( data ?? undefined ); break;
        case 'interface04' : return createInterface04( data ?? undefined ); break;
        default: throw new Error(`Unknown prop type: ${propType}`);
    }
}

export function createSomeGroup03( defaultData? : SomeGroup03Data ) : FormGroup< SomeGroup03FormGroup > {
    const group = new FormGroup< SomeGroup03FormGroup >({
        propC01 : new FormControl< string | null >( defaultData?.propC01 ?? null )
    });

    if( defaultData?.propC02 ) {
        group.addControl( 'propC02', new FormControl< FlexiblePropOptionsType | null >( defaultData.propC02 ) );
        group.addControl( 'propC03', createPropC03Group( defaultData.propC02, defaultData.propC03 ?? undefined ) );
    }
    return group;
}

错误场景与表现 #

编辑流程：用户点击条目后，数据存入服务的ItemToEdit变量，触发EditorToggle信号；父组件监听信号，渲染包含ItemEditorComponent的模态框，组件从服务获取数据并创建表单。

• 模板中{{Item | json}}能正常显示数据
• 执行表单创建代码时触发错误，追踪指向第一个可选对象的必填属性创建函数

组件代码：

import { createMyForm } from "./some/folder/another-folder/create-my-form"

export class MyParentComponent implements OnInit {
    Item!   : ItemInterface;
    MyForm! : FormGroup< MyFormInterface >;

    constructor( private dataService : ItemDataService ) {}

    ngOnInit() : void {
        this.Item = this.dataService.getItemToEdit();
        this.MyForm = createMyForm( this.dataService.getItemToEdit() );
    }
}

排查尝试 #

• 尝试用三元运算符替代??处理undefined/null，错误依旧：

export function createBlahBlah( data? : BlahDataBlah ) : FormGroup< BlahBlah > {
    return new FormGroup< BlahBlah >({
        someOptionalProp : ( data?.someOptionalProp ? createTheProp( data.someOptionalProp ) : undefined )
    });
}

问题分析与解决方案 #

核心问题 #

1. FormGroup初始化传入undefined控件：在FormGroup初始配置中传入undefined作为控件值时，Angular表单内部会尝试读取该控件的enabled属性，undefined无任何属性，直接触发报错。
2. 代码语法/逻辑疏漏：部分实现存在语法错误（如缺少new关键字、分号、return语句），导致运行时异常，间接引发enabled读取错误。
3. 可选属性类型不匹配：FormGroup接口定义可选控件，但初始化时传入undefined会触发错误，正确方式是后续通过addControl添加。

修复方案 #

1. 禁止在FormGroup初始配置中传入undefined控件

对于可选控件，不在初始对象中写入undefined值，而是通过addControl在后续条件判断中添加：

// 错误写法
new FormGroup({
  someOptionalProp: data?.someProp ? createControl(data.someProp) : undefined
})

// 正确写法
const group = new FormGroup({
  requiredProp: new FormControl(...)
});

if (data?.someProp) {
  group.addControl('someOptionalProp', createControl(data.someProp));
}

2. 修复代码中的语法错误

• 补全createSomeGroup02中FormGroup实例化的new关键字
• 补全createSomeGroup03中addControl语句的分号和函数return语句
• 给createPropC03Group添加默认分支，避免返回undefined

3. 统一undefined/null处理逻辑

使用??运算符确保传入表单控件的初始值要么是合法数据，要么是null，避免undefined流入控件初始化：

new FormControl<string | null>(defaultValue ?? null);

4. 确保数据就绪后再创建表单

如果dataService.getItemToEdit()是异步获取的，ngOnInit时可能未拿到数据，需监听数据变化后再初始化表单：

export class MyParentComponent implements OnInit {
    Item = this.dataService.ItemToEdit;
    MyForm!: FormGroup<MyFormInterface>;

    constructor(private dataService: ItemDataService) {}

    ngOnInit(): void {
        effect(() => {
            const item = this.Item();
            if (item) {
                this.MyForm = createMyForm(item);
            } else {
                this.MyForm = createMyForm();
            }
        });
    }
}

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