如何在angular2的表单数组中显示嵌套数组数据？

Posted 2023-03-13

【中文标题】如何在angular2的表单数组中显示嵌套数组数据？

【英文标题】：How can display nested array data in form array in angular2?

【发布时间】：2017-09-03 15:34:44

【问题描述】：

我已经在 angular2 项目中实现了FormGroup 来呈现表单，并且我已经使用formArray 来获取嵌套数组数据

form.component.html

<div class="col-md-12" formArrayName="social_profiles">
  <div *ngFor="let social of resumeForm.controls.social_profiles.controls; let i=index" class="panel panel-default m-t-10">
    <div class="panel-heading" style="min-height: 30px;">
      <span class="glyphicon glyphicon-remove pull-right" *ngIf="resumeForm.controls.social_profiles.controls.length > 1" (click)="removeSocialProfiles(i)"></span>
    </div>
    <div class="panel-body" [formGroupName]="i">
      <social-profile [group]="resumeForm.controls.social_profiles.controls[i]"></social-profile>
    </div>
  </div>
</div>

form.component.ts

export class FormComponent implements OnInit 
    public resumeForm: FormGroup;

    constructor(private formBuilder: FormBuilder) 

    ngOnInit() 
        this.resumeForm = this.formBuilder.group(
            name: ['', Validators.required],
            label: ['',],
            email: [''],
            phone: [''],  
            social_profiles: this.formBuilder.array([])
        );

        this.addSocialProfiles();
    

    initSocialProfiles() 
        return this.formBuilder.group(
            network: [''],
            url: ['']
        );
    

    addSocialProfiles() 
        const control = <FormArray>this.resumeForm.controls['social_profiles'];
        const addrCtrl = this.initSocialProfiles();        
        control.push(addrCtrl);      
    

    removeSocialProfiles(i: number) 
        const control = <FormArray>this.resumeForm.controls['social_profiles'];
        control.removeAt(i);
    

social-profile 是数组的子表单

social-profile.component.html

<div [formGroup]="socialForm">
    <div class="col-md-6">
        <input type="text" class="form-control" placeholder="Enter Network" formControlName="network">
    </div>
    <div class="col-md-6">
        <input type="text" class="form-control" placeholder="Enter Network URL" formControlName="url">
    </div>
</div>

social-profile.component.ts

export class SocialProfileComponent 
    @Input('group')
    public socialForm: FormGroup;

从服务回调中获取 JSON

    "basics_info": 
        "name": "Joh Doe",
        "label": "Programmer",
        "Social_profiles": [
            "network": "Twitter",
            "url": "https://www.twitter.com/kumarrishikesh12"
        , 
            "network": "Facebook",
            "url": "https://www.facebook.com/kumarrishikesh12"
        ]
    

添加数据表单工作完美，但如何在页面初始化的编辑时间以表单形式显示现有的嵌套 json 数组（从 api 获取）？如下图

【问题讨论】：

你是怎么得到 json 的？

@RomanC 先生，您可以在我更新的问题中查看。

没关系，但是我没有问你返回什么json，看我上面的问题。

【参考方案1】：

这里假设您已经从对象basics_info 中提取了内容，即：

并将 JSON 分配给变量data，这样你就得到了data 的内容：

    "name": "Joh Doe",
    "label": "Programmer",
    "Social_profiles": [
        "network": "Twitter",
        "url": "https://www.twitter.com/kumarrishikesh12"
    , 
        "network": "Facebook",
        "url": "https://www.facebook.com/kumarrishikesh12"
    ]

然后让我们修补这些值。收到数据后，您可以在收到 JSON（或构建表单）后修补这些值。在这里，我在表单构建后修补值。

下面我想澄清一下，调用patchValues 中的另一个方法，它实际上设置了值。

patchValues() 
  const control = <FormArray>this.resumeForm.controls['social_profiles'];
  this.data.Social_profiles.forEach(x =>  // iterate the array
     control.push(this.patch(x.network, x.url)) // push values
  );


patch(network, url) 
  return this.fb.group(
    network: [network],
    url: [url]
  );

孩子应该很好地捕捉到这些变化。这是给你的演示，变量是不同的，因为我使用了现有的表单。但是逻辑是完全一样的。

Plunker

【讨论】：

非常感谢@AJT_82，看完后我认为它会帮助我，所以我会应用它并回复你

没问题，告诉我进展如何 :)

非常感谢先生;)