我已经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获取)?如下图所示
在这里,假设您已经从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] 删除。
我来说两句