Question

我试图根据我的初始http响应对象来迭代输入字段的列表。

我在应用程序中使用反应形式，因此在ui中迭代form元素的对象时，如何在formBuilder.group对象中生成动态键？这样一来，我提交表单时就很容易处理所有表单元素数据，就像我们保留其静态数据一样。

请参考下面提到的堆栈闪电：

    // service response data
    this. formData=[
        {name: krish, email: test@gmail.com},
        {name:anand, email: teat2@gmail}
     ]

    // how to generate dynamic key in formbuilder group object ?
    this.homeDetails = this.formBuilder.group({
      krish:['', Validators.required],
      anand:['', Validators.required]
    });

上面的forBuilder组对象如何动态地迭代和设置krish / anad的键值？因为对象基于服务响应是动态的，所以有什么办法可以像for循环一样通过FormBuilder.group生成对象。？

引用网址： https://stackblitz.com/edit/angular-router-example-dynamic-formcontrolname-rtmsqz?file=app%2Fhome%2Fhome.component.ts

Answer 1

尝试这个。这会起作用

      *Declare formgroup variable* 

          homeDetails: FormGroup;

     // service response data
              this. formData=[
                    {name: krish, email: test@gmail.com},
                    {name:anand, email: teat2@gmail}
                 ]
         this.homeDetails = this.fb.group({});

            let formControlFields = [];
        for (let k = 0; k < this.formData.length; k++) {
                formControlFields.push({ name: this.formData[k].name, control: new FormControl('', Validators.required) });
              }

    formControlFields.forEach(f => this.homeDetails.addControl(f.name, f.control));

angular 5如何在formBuilder.group对象

1 个答案: