how to add nested forms in angular2

Question

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

}

Answer 1

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.