如何在angular2中添加嵌套表单

Question

Image contains problem

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

我使用过嵌套表单方法、动态表单方法，但无法做到这一点。需要帮助。

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>

组件：-

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);
    }
  }

}

Answer 1

您应该将您的searchForm 扩展一个属性，例如：socialMediaLinks，FormArray 类型：

createItem(): FormGroup {
    return this.fb.group({
      name: '',
      desg: '',
      socialMediaLinks: this.fb.array([this.createSocialMediaItem()])
    });
  }

现在为socialMediaLinks FormArray 创建带有项目（socialMediaCategory、链接）的 FormGroup 的函数：

createSocialMediaItem(): FormGroup {
    return this.fb.group({
      socialMediaCategory: '',
      link: ''
    });
  }

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

这里是扩展模板：

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

检查我在 stackblitz 上的工作 example。