动态显示嵌套对象以用数据填充其输入

时间:2019-06-12 17:38:33

标签: angular7 angular-reactive-forms

我将angular 7用作项目的前端,并希望显示输入字段供用户使用反应式表单填充数据。 问题是我要显示的对象具有多层,因此第一层可以具有可以动态添加的输入(以便在构建表单时使用fb.array)和可以与所有对象一起动态添加的对象它包含的东西可以具有相同甚至不同的结构,等等。

我已经通过静态方式实现了这一目标,其中包括以下内容: -确定可以动态添加多少个输入和对象(我可以知道,通过对象中的属性以及具有相同结构但类型不同的输入,输入,列表,对象等), -为每个对象及其子对象添加嵌套形式。  这意味着当对象变得更深时,我必须添加一些代码。 我该如何动态地实现该目标,以便无论对象有多少层,都可以传递对象,并将其显示为嵌套形式,并且可以使用反应形式来完成?还是必须更改整个方法?

这是我已经尝试过的:

 this.check = this.objects.filter(e=>e.Max>1);

     if(this.check.length === 1){
      this.parentA=this.check[0];
      this.childrenA=this.parentA[0].filter(e=>e.type != "object");
       this.form = this.fb.group({
            'A': this.fb.array([
              this.initA(),
            ])
          });
     }else if(this.check.length === 2){
       .
       .
        this.form = this.fb.group({
        'A': this.fb.array([
          this.initB()
        ])
       });
    }

initA() {

    const elementFormGroup = this.fb.group({}); 
    this.childrenA.forEach(e => {

        eFormGroup.addControl(e.Name, 
       this.fb.control([], Validators.required));
      }
}

initY() {debugger    
    const elementFormGroup = this.fb.group({});
    this.childrenB.forEach(e => {
        elementFormGroup.addControl(e.Name, 
        this.fb.control([], Validators.required));     
    });

    elementFormGroup.addControl('A', this.fb.array([
      this.initA()
    ]))
    return elementFormGroup;
  }
.
.
.
.

我将不胜感激,因为我真的被这种方式所困扰。 谢谢。

0 个答案:

没有答案