使用4号角反应形式添加新的动态形式控制器

时间:2018-06-28 15:12:02

标签: angular

我有一个具有不同字段的角形式,并且需要在单击ADD按钮的同时添加动态字段。而且我以以下方式将动态参数(来自模式对话框)存储在JSON对象中,

我在stackblitz中添加了示例代码,对此有谁可以帮忙。 https://stackblitz.com/edit/angular-871vxk?file=src/app/app.component.ts

this.fields = {
          [result.fieldname]: {
            type: result.fieldtype, //fieldtype='text'
            value: result.fieldvalue, //fieldvalue = ''
            label: result.fieldname, //fieldname = 'First field'
          },
        }; 

我浏览了许多文章,发现只能使用formArray通过以下方式添加静态字段。但是我如何使用反应形式控制器添加许多不同的字段。

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormArray, FormGroup, Validators } from '@angular/forms';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   public form          : FormGroup;


   constructor(public navCtrl       : NavController,
               public navParams     : NavParams,
               private _FB          : FormBuilder)
   {

      this.form = this._FB.group({
         name             : ['', Validators.required],
         technologies     : this._FB.array([
            this.initTechnologyFields()
         ])
      });
   }


   initTechnologyFields() : FormGroup
   {
      return this._FB.group({
         name       : ['', Validators.required]
      });
   }

   addNewInputField() : void
   {
      const control = <FormArray>this.form.controls.technologies;
      control.push(this.initTechnologyFields());
   }
}

0 个答案:

没有答案