ABP Framework Angular UI动态表单下拉框默认值设置问题

我在使用ABP Framework的Angular UI开发动态表单时，实现了一个时区下拉框，代码如下：

const timeZoneProp = new FormProp<IdentityUserDto>({    
    type: ePropType.Enum,    
    name: 'TimeZoneId',    
    displayName: '::TimeZone',    
    isExtra: true,    
    id: 'TimeZoneId',    
    autocomplete: 'off',    
    validators: () => [Validators.required],    
    options: (data: PropData<IdentityUserDto>): Observable<Option<any>[]> => {      
        const service = data.getInjected(TimeZoneService);      
        return service        
            .getList()        
            .pipe(          
                map(            
                    response =>              
                        response.items?.map(                
                            item =>                  
                                ({ key: item.description, value: item.id } as Option<any>)              
                        ) || []          
                )        
            );    
    }  
});
propList.addByIndex(timeZoneProp, 6);

当前下拉框能正常加载数据，但设置默认值时遇到问题：尝试通过索引defaultValue: 0或键值defaultValue: '(UTC+00:00) Coordinated Universal Time ETC/GMT'均无效；尝试在options中设置时，因defaultValue是只读属性无法赋值。

后续推测是选项异步加载导致默认值在选项就绪前设置失效，尝试用Promise赋值触发了类型错误：

Type 'Promise<string | number | boolean | Date | undefined>' is not assignable to type 'string | number | boolean | Date | undefined'.ts(2322)

'this' implicitly has type 'any' because it does not have a type annotation.

请问如何正确为该异步加载的下拉框设置默认值？

针对ABP Framework Angular动态表单中异步加载选项的下拉框，可通过以下两种方式正确设置默认值：

方法一：利用FormProp的onInit钩子赋值（推荐） #

在FormProp配置中添加onInit钩子，待表单控件初始化完成后，手动调用服务获取时区列表，加载完成后给控件设置默认值：

const timeZoneProp = new FormProp<IdentityUserDto>({    
    // 保留原有配置
    type: ePropType.Enum,    
    name: 'TimeZoneId',    
    displayName: '::TimeZone',    
    isExtra: true,    
    id: 'TimeZoneId',    
    autocomplete: 'off',    
    validators: () => [Validators.required],    
    options: (data: PropData<IdentityUserDto>): Observable<Option<any>[]> => {      
        const service = data.getInjected(TimeZoneService);      
        return service        
            .getList()        
            .pipe(          
                map(            
                    response =>              
                        response.items?.map(                
                            item =>                  
                                ({ key: item.description, value: item.id } as Option<any>)              
                        ) || []          
                )        
            );    
    },
    onInit: (data: PropData<IdentityUserDto>) => {
        // 获取当前表单控件实例
        const timeZoneControl = data.form.get('TimeZoneId');
        if (!timeZoneControl) return;

        // 注入时区服务并获取列表
        const timeZoneService = data.getInjected(TimeZoneService);
        timeZoneService.getList().subscribe(response => {
            // 找到目标时区（示例为UTC时区）
            const defaultTimeZone = response.items?.find(item => 
                item.description === '(UTC+00:00) Coordinated Universal Time ETC/GMT'
            );
            // 设置控件值
            if (defaultTimeZone) {
                timeZoneControl.setValue(defaultTimeZone.id);
            }
        });
    }
});
propList.addByIndex(timeZoneProp, 6);

方法二：在选项流中同步设置默认值 #

修改options返回的Observable流，在生成选项列表的同时，给表单控件设置默认值：

const timeZoneProp = new FormProp<IdentityUserDto>({    
    // 保留原有配置
    type: ePropType.Enum,    
    name: 'TimeZoneId',    
    displayName: '::TimeZone',    
    isExtra: true,    
    id: 'TimeZoneId',    
    autocomplete: 'off',    
    validators: () => [Validators.required],    
    options: (data: PropData<IdentityUserDto>): Observable<Option<any>[]> => {      
        const service = data.getInjected(TimeZoneService);
        // 获取表单控件实例
        const timeZoneControl = data.form.get('TimeZoneId');

        return service        
            .getList()        
            .pipe(          
                map(response => {
                    // 生成选项列表
                    const options = response.items?.map(item => 
                        ({ key: item.description, value: item.id } as Option<any>)
                    ) || [];

                    // 设置默认值
                    if (timeZoneControl) {
                        const defaultOption = options.find(opt => 
                            opt.key === '(UTC+00:00) Coordinated Universal Time ETC/GMT'
                        );
                        if (defaultOption) {
                            timeZoneControl.setValue(defaultOption.value);
                        }
                    }

                    return options;
                })        
            );    
    }  
});
propList.addByIndex(timeZoneProp, 6);

关键注意点 #

• 不要直接使用defaultValue配置项：异步加载的选项在表单初始化阶段还未返回，此时设置的默认值无法匹配到选项列表中的有效项，导致失效。
• 确保设置的是选项的value字段：表单控件绑定的是选项的value（即时区的id），而非key（描述文本），否则无法匹配。

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