如何在angular2中添加嵌套表单
[英] how to add nested forms in angular2
本文介绍了如何在angular2中添加嵌套表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
图片有问题
我创建了一个表单，它从添加按钮动态添加行，但我也创建了一个按钮，我只需要从中添加来自该链接的一些组件.添加更多链接按钮仅用于创建这两个组件.
我使用了嵌套表单方法、动态表单方法，但无法做到这一点.需要帮助.
HTML:-
<p></p><div><form [formGroup]="searchForm" novalidate (ngSubmit)="submit(searchForm.value)"><div formArrayName="属性"><div *ngFor="let prop of searchForm.get('properties').controls; let i = index"><div [formGroupName]="i" class="row col-md-12"><select formControlName="desg" class="form-control col-md-2"><option value="CEO">CEO</option><option value="CTO">CTO</option><option value="CMO">CMO</option><option value="项目经理">项目经理</option></选择><input formControlName="name" type="text" class="form-control col-md-3" placeholder="Name"><select formControlName="socialMediaCategory" class="form-control col-md-2"><option value="LinkedIn">LinkedIn</option><option value="Facebook">Facebook</option><option value="Twitter">Twitter</option><option value="Github">Github</option></选择><input formControlName="link" type="text" class="form-control col-md-3" placeholder="Link"><a class="col-md-2" (click)="onAddProperty()">添加更多链接</a><button *ngIf="searchForm.controls['properties'].length > 1 " (click)="onDelProperty(i)">删除</button>
<p></p><a (click)="onAddProperty()">添加</a><button class="btn btn-bold btn-primary" type="submit">submit</button></表单>
组件:-
import { Component, OnInit } from '@angular/core';从 '@angular/forms' 导入 { FormGroup, FormBuilder, FormArray, FormControl };从'../../services/ico.service'导入{IcoService}；从'util'导入{调试}；@成分({选择器:应用团队"，templateUrl: './team.component.html',styleUrls: ['./team.component.css']})导出类 TeamComponent 实现 OnInit {搜索表单:表单组；searchForm1:表单组；构造函数(私有 fb:FormBuilder，私有 icoService:IcoService，){}ngOnInit() {this.searchForm = this.fb.group({属性:this.fb.array([this.createItem()])});}createItem(): FormGroup {返回 this.fb.group({姓名: ''，设计:'',社交媒体类别:'',关联: ''}提交(表单数据:任何){this.icoService.teamDetail(formData).subscribe((result) => {控制台日志()}, (错误) =>{ console.log('err',err) })}onAddProperty() {for(var i=1; i<=1; i++) {(this.searchForm.get('properties') as FormArray).push(this.createItem());}}onDelProperty(索引:任何){for(var i=1; i<=1; i++) {(this.searchForm.get('properties') as FormArray).removeAt(index);}}}
解决方案
你应该扩展你的 searchForm 一个额外的属性，例如:socialMediaLinks 类型 FormArray:>
createItem(): FormGroup {返回 this.fb.group({姓名: ''，设计:'',社交媒体链接:this.fb.array([this.createSocialMediaItem()])});}
现在为socialMediaLinks FormArray 创建使用项目(socialMediaCategory，链接)创建FormGroup 的函数:
createSocialMediaItem(): FormGroup {返回 this.fb.group({社交媒体类别:'',关联: ''});}
添加两个函数，用于在socialMediaLinks FormArray 中添加新项目和删除项目:
onAddSocialMediaLink(linkForm: FormGroup) {(linkForm.get('socialMediaLinks') as FormArray).push(this.createSocialMediaItem());}onDelSocialMediaLink(linkForm: FormGroup, index: any) {(linkForm.get('socialMediaLinks') as FormArray).removeAt(index);}
在这里你可以看到，这个函数需要一个 FormGroup 类型的变量作为参数.这需要您访问 FormArray.在这里，您应该从模板中的 searchForm.get('properties').controls 迭代中给出 prop.
这是扩展模板:
<p></p><button *ngIf="searchForm.controls['properties'].length > 1 " (click)="onDelProperty(i)">删除</button><a (click)="onAddProperty()">添加</a><button class="btn btn-bold btn-primary" type="submit">submit</button></表单>
在 stackblitz 上查看我的示例.
Image contains problem
I have created a form and it is adding rows dynamically from add button but i have also created a button from which i need to add only some components from that link.Add more link button is used to create only those two components.
i have used nested form approach, dynamic form approach but not able to do the same. Help needed.
HTML:-
<div class="container">
<p> </p>
<div>
<form [formGroup]="searchForm" novalidate (ngSubmit)="submit(searchForm.value)">
<div formArrayName="properties">
<div *ngFor="let prop of searchForm.get('properties').controls; let i = index">
<div [formGroupName]="i" class="row col-md-12">
<select formControlName="desg" class="form-control col-md-2">
<option value="CEO">CEO</option>
<option value="CTO">CTO</option>
<option value="CMO">CMO</option>
<option value="Project Manager">Project Manager</option>
</select>
<input formControlName="name" type="text" class="form-control col-md-3" placeholder="Name">
<select formControlName="socialMediaCategory" class="form-control col-md-2">
<option value="LinkedIn">LinkedIn</option>
<option value="Facebook">Facebook</option>
<option value="Twitter">Twitter</option>
<option value="Github">Github</option>
</select>
<input formControlName="link" type="text" class="form-control col-md-3" placeholder="Link">
<a class="col-md-2" (click)="onAddProperty()">Add More Links</a>
<button *ngIf="searchForm.controls['properties'].length > 1 " (click)="onDelProperty(i)">Delete</button>
</div>
</div>
</div>
<p>
</p>
<a (click)="onAddProperty()">Add</a>
<button class="btn btn-bold btn-primary" type="submit">submit</button>
</form>
</div>
</div>
component:-
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, FormControl } from '@angular/forms';
import { IcoService } from '../../services/ico.service';
import { debug } from 'util';
@Component({
selector: 'app-team',
templateUrl: './team.component.html',
styleUrls: ['./team.component.css']
})
export class TeamComponent implements OnInit {
searchForm: FormGroup;
searchForm1: FormGroup;
constructor(private fb: FormBuilder,private icoService: IcoService,) { }
ngOnInit() {
this.searchForm = this.fb.group({
properties: this.fb.array([this.createItem()])
});
}
createItem(): FormGroup {
return this.fb.group({
name: '',
desg: '',
socialMediaCategory: '',
link: ''
}
submit(formData: any) {
this.icoService.teamDetail(formData).subscribe((result) => {
console.log()
}, (err) => { console.log('err',err) })
}
onAddProperty() {
for(var i=1; i<=1; i++) {
(this.searchForm.get('properties') as FormArray).push(this.createItem());
}
}
onDelProperty(index:any) {
for(var i=1; i<=1; i++) {
(this.searchForm.get('properties') as FormArray).removeAt(index);
}
}
}
解决方案
You should extend your searchForm by one more property for example: socialMediaLinks of type FormArray:
createItem(): FormGroup {
return this.fb.group({
name: '',
desg: '',
socialMediaLinks: this.fb.array([this.createSocialMediaItem()])
});
}
Now create function for creating FormGroup with items (socialMediaCategory, link) for socialMediaLinks FormArray:
createSocialMediaItem(): FormGroup {
return this.fb.group({
socialMediaCategory: '',
link: ''
});
}
Add two function for add new item and delete an item to/from the socialMediaLinks FormArray:
onAddSocialMediaLink(linkForm: FormGroup) {
(linkForm.get('socialMediaLinks') as FormArray).push(this.createSocialMediaItem());
}
onDelSocialMediaLink(linkForm: FormGroup, index: any) {
(linkForm.get('socialMediaLinks') as FormArray).removeAt(index);
}
Here you can see, that this function need an variable of type FormGroup as parameter. This need you for access to the FormArray. Here you should give prop from iterating of searchForm.get('properties').controls in template.
Here is extended template for that:
<form [formGroup]="searchForm" novalidate (ngSubmit)="submit(searchForm.value)">
<div formArrayName="properties">
<div *ngFor="let prop of searchForm.get('properties').controls; let i = index">
<div [formGroupName]="i" class="row col-md-12">
<select formControlName="desg" class="form-control col-md-2">
<option value="CEO">CEO</option>
<option value="CTO">CTO</option>
<option value="CMO">CMO</option>
<option value="Project Manager">Project Manager</option>
</select>
<input formControlName="name" type="text" class="form-control col-md-3" placeholder="Name">
<div formArrayName="socialMediaLinks">
<div *ngFor="let links of prop.get('socialMediaLinks').controls; let j = index">
<div [formGroupName]="j" class="row col-md-12">
<select formControlName="socialMediaCategory" class="form-control col-md-2">
<option value="LinkedIn">LinkedIn</option>
<option value="Facebook">Facebook</option>
<option value="Twitter">Twitter</option>
<option value="Github">Github</option>
</select>
<input formControlName="link" type="text" class="form-control col-md-3" placeholder="Link">
<a class="col-md-2" (click)="onAddSocialMediaLink(prop)">Add More Links</a>
<button *ngIf="prop.controls['socialMediaLinks'].length > 1 " (click)="onDelSocialMediaLink(prop, j)">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
<p>
</p>
<button *ngIf="searchForm.controls['properties'].length > 1 " (click)="onDelProperty(i)">Delete</button>
<a (click)="onAddProperty()">Add</a>
<button class="btn btn-bold btn-primary" type="submit">submit</button>
</form>
Check my working example on stackblitz.
这篇关于如何在angular2中添加嵌套表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
