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

萨加尔帕特尔

我已经FormGroup在angular2项目中实现了渲染形式,并且我已经使用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.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>

社会档案.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获取)?如下图所示

在此处输入图片说明

AJT82

在这里,假设您已经从object中提取了内容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]
  });
}

孩子应该很好地抓住这些变化。这是给您的演示,变量不同,因为我使用的是现有表格。但是逻辑是绝对相同的。

柱塞

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在angular2中发送带有表单数据的帖子

如何在Angular2中用数据数组填充表单?

如何在angular2 / typescript中使用.map或flatmap从嵌套数组中获取特定数据

如何在ReactJS中以JSON显示嵌套数组数据?

如何在Angular中遍历嵌套数组

如何在vue.js组件中显示嵌套数组数据

如何从嵌套数组中查找数据?

如何从数组对象中的嵌套数组获取数据

如何在嵌套数组中过滤JSON对象数组

如何在嵌套表单数组中全选并取消全选?

如何在API原生的react中显示嵌套数组数据?

在angular2中访问嵌套数组对象时出现问题

嵌套表单数组的Angular PatchValue

如何在Vue中循环嵌套数组并每5秒显示数据?

如何在HTML中访问Angular的表单数组?

如何在MongoDB中更新嵌套数组中的数据

如何在模板中显示嵌套数组

如何在Angular JS中打印嵌套数组

AngularJS-如何在ng-repeat中单击父数组时显示嵌套数组

如何使用angular2 Reactive表单构建嵌套数组?

如何从嵌套数组中获取数据

如何在angular api调用中显示嵌套数组对象

如何将 Postman 正文中带有嵌套数组字段的原始 JSON 转换为表单数据?

Angular,如何从嵌套表单组中获取表单数组值

如何在 React-Native 的屏幕上访问嵌套数组 JSON 数据中的嵌套对象

如何在laravel刀片中显示嵌套数组数据?

如何在 ngx 数据表中显示嵌套数组对象?

如何在表格中以角度填充嵌套表单数组?

如何在对象中的数组中获取嵌套数组中的数据