基于 FormBuilder 数组类型值控件中的输入值未创建答案

【问题标题】：Based on Input value in FormBuilder array type value control not creating基于 FormBuilder 数组类型值控件中的输入值未创建
【发布时间】：2021-07-05 09:44:31
【问题描述】：

我有一个包含 Application name 属性的 json 对象，它是对象的值数组。使用FormBuilder 创建控件时，应用程序类型是对象而不是值数组。

这里是stackblitz demo

表单控件

如何在控件中为Application 属性获取值作为数组？

【问题讨论】：

数组本质上是 JavaScript 中的对象，这就是它显示其类型为 Object 的原因。
是的@ammadkh，为什么控制中缺少值？数组类型值不可能吗？
在角度我们使用 FormControlArray 作为这种类型的值

标签： javascript html angular formgroups

【解决方案1】：

将其声明为FormArray Control，如下所示：

ChidlrenForm = this.fb.group({
  entityName: ['', Validators.required],
  entityType: [''],
 applications: this.fb.array([
        this.fb.control('')
      ])
});

您可以在formBuilder 中看到应用程序声明为应用程序

【讨论】：

@r08 “idea ... +v1 ??”是什么意思
可能是高水平，但对我来说它就像提示一样，没有完全回答，所以我投了一票

【解决方案2】：

这是从 json 创建 FormArray 和 FormControl 的代码。

import { Component } from '@angular/core';
import {FormBuilder} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  constructor(public formBuilder: FormBuilder){

  }
  ngOnInit(){
    this.createConrol()
  }
  createConrol(){
    let listOfChildren =[
      {
        "EntityName": "",
        "EntityType": "Tenant",
        "Application": [
          {
            "Value": "Test1",
            "EntityName": "Test1"
          },
          {
            "Value": "Test2",
            "EntityName": "Test2"
          }
        ],
        "EntityId": "339fff35-643b-482f-aff9-69607e80024d"
      }
    ];
   
    const group = this.formBuilder.group({});
 
    listOfChildren.forEach(obj => {
          let control = this.createFormArrayAndObjectControl(obj)  
          group.addControl(obj.EntityId, control)
      });
  }

  createFormArrayAndObjectControl(obj){
    const group = this.formBuilder.group({});
    for(const key in obj){
      if(Array.isArray(obj[key])){
        let formArrayControl  = this.formBuilder.array([]);
        for(var innerObj of obj[key]){
          let control = this.createControl(innerObj);
          formArrayControl.push(control);
        }
        group.addControl(key,formArrayControl);
      }
      else {
        group.addControl(key,this.createControl(obj[key]));
      }          
    }
    return group; 
  }

  createControl(value){
    return this.formBuilder.control(value,{ updateOn: "blur" })
  }
}

【讨论】：