Angular响应式表单：如何为FormBuilder组动态设置数组元素值

我需要通过后端接口获取的数据填充Angular响应式表单的下拉框，表单采用FormArray结构创建，userDetailsData为存储后端数据的对象。当前代码中toy_id始终被设置为toyList数组的第一个元素ID，需实现为FormBuilder组的toy_id动态设置数组中对应的ID。

原代码示例 #

this.userDetailsData.user_context.forEach(async data => {
    const userContext = this.createJobForm.get('user_context') as FormArray;
    this.parent_id = this.parentList.find(parent => parent.parent_name === data.parent_name)?.id;
    this.toyList = this.parentList.filter(toy => toy.id === this.parent_id).flatMap(item => item.toys);
    await this.getUsersList();
    this.userIdentifier = this.userList.find(user => user.name === data.username)?.identifier;

    userContext.insert(0, this.formBuilder.group({
        parent_id: [this.parent_id, [Validators.required]],
        user_identifier: [this.userIdentifier],
        dynamic_users: [this.isUserAvailble ? true : false],
        toy_id: [this.toyList[0].id]  // 此处始终设置为数组第一个toy的ID，需要修改
    }));
}); 

toyList数组示例 #

[
    {
        "id": "A1450D375-7257-4555F5-BA30-DF246ED6E",
        "type": "toy",
        "parent_name": "admin",
        "toy_name": "Test_Toy12"
    },
    {
        "id": "6A0EC-185A-DF-80A-FD7BB298CE2gDERTF",
        "type": "toy",
        "parent_name": "admin",
         "toy_name": "Test_Toy56"
    }
]

解决方案 #

核心问题是当前代码固定取toyList的第一个元素ID，我们需要根据userDetailsData.user_context中每一项data的标识（比如toy_name）去toyList中匹配对应的玩具项，再获取其ID。

假设data对象中包含toy_name字段（用于匹配玩具），修改toy_id的赋值逻辑即可：

this.userDetailsData.user_context.forEach(async data => {
    const userContext = this.createJobForm.get('user_context') as FormArray;
    this.parent_id = this.parentList.find(parent => parent.parent_name === data.parent_name)?.id;
    this.toyList = this.parentList.filter(toy => toy.id === this.parent_id).flatMap(item => item.toys);
    await this.getUsersList();
    this.userIdentifier = this.userList.find(user => user.name === data.username)?.identifier;

    // 从toyList中匹配当前data对应的玩具项，获取其ID，无匹配时设为null
    const matchedToyId = this.toyList.find(toy => toy.toy_name === data.toy_name)?.id || null;

    userContext.insert(0, this.formBuilder.group({
        parent_id: [this.parent_id, [Validators.required]],
        user_identifier: [this.userIdentifier],
        dynamic_users: [this.isUserAvailble ? true : false],
        toy_id: [matchedToyId]  // 动态设置匹配到的toy_id
    }));
}); 

说明 #

• 如果data中存储的不是toy_name而是玩具的原始id（比如data.toy_id），直接将匹配逻辑改为toy.id === data.toy_id即可。
• 添加|| null是为了处理无匹配项的情况，避免出现undefined导致表单报错，可根据业务需求调整默认值。

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