如何在angular2中添加嵌套表单

我已经创建了一个表单，它正在从“添加”按钮动态添加行，但我也创建了一个按钮，我只需要从该链接添加一些组件。添加更多链接按钮仅用于创建这两个组件

我使用了嵌套表单方法和动态表单方法，但不能做到同样的事情。需要帮助

HTML:-

首席执行官
首席技术官
CMO
项目经理
LinkedIn
脸谱网
啁啾
github
添加更多链接
删除


添加
提交

组成部分：-

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormGroup，FormBuilder，FormArray，FormControl}；
从“../../services/ico.service”导入{IcoService}；
从“util”导入{debug}；
@组成部分({
选择器：“应用程序团队”，
templateUrl:“./team.component.html”，
样式URL:['./team.component.css']
})
导出类TeamComponent实现OnInit{
搜索形式：FormGroup；
searchForm1:FormGroup；
构造函数（私有fb:FormBuilder，私有icoService:icoService，）{}
恩戈尼尼特（）{
this.searchForm=this.fb.group({
属性：this.fb.array（[this.createItem（）]）
});    
}
createItem（）：FormGroup{
返回此.fb.group({
名称：“”，
设计：''，
社会医学分类：''，
链接：“”
}
提交（表格数据：任何）{
this.icoService.teamDetail（formData）.subscribe（（结果）=>{
console.log（）
}，（err）=>{console.log（'err'，err）}
}
onAddProperty（）{
对于（var i=1；i您应该通过一个以上属性扩展您的
搜索表单
，例如：
socialMediaLinks
，类型为FORMARY:

createItem（）：FormGroup{
返回此.fb.group({
名称：“”，
设计：''，
socialMediaLinks:this.fb.array（[this.createSocialMediaItem（）]））
});
}

现在，为
socialMediaLinks
FormArray创建用于创建带有项（socialmediacetegory，link）的FormGroup的函数：

createSocialMediaItem（）：FormGroup{
返回此.fb.group({
社会医学分类：''，
链接：“”
});
}

添加两个功能，用于在
socialMediaLinks
FormArray中添加新项目和删除项目：

OnAddSocialmedialLink（链接形式：FormGroup）{
（linkForm.get（'socialMediaLinks'）作为FormArray.push（this.createSocialMediaItem（））；
}
OnDelSocialmedialLink（链接形式：FormGroup，索引：any）{
（linkForm.get（'socialMediaLinks'）作为FormArray）。删除（索引）；
}

在这里，您可以看到，此函数需要一个FormGroup类型的变量作为参数。这需要您访问FormArray。在这里，您应该通过迭代模板中的

searchForm.get（'properties'）。控件
给出
prop

以下是扩展模板：

    <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>


首席执行官
首席技术官
CMO
项目经理
LinkedIn
脸谱网
啁啾
github
关于stackblitz。
这不是确切的问题……请再次查看……添加更多链接按钮仅用于创建这两个链接components@Rajkumar对不起，我已经更新了我的答案和stackblick上的示例。请查看。