2

I have a FormArray that can input new fields and can send the value of the whole form on button click, however I am trying to add an input that is tied to the name held within the same object data, but I cannot seem to get it to display let along send with the rest of the updated data...

Here is my blitz

html

<form [formGroup]="myForm">
    <div formArrayName="companies">
      <!-- I am wanting to update and send the name of the input also... -->
      <input formControlName="name"/>

      <div *ngFor="let comp of myForm.get('companies').controls; let i=index">
        <legend><h3>COMPANY {{i+1}}: </h3></legend>
        <div [formGroupName]="i">
          <div formArrayName="projects">
            <div *ngFor="let project of comp.get('projects').controls; let j=index">
              <legend><h4>PROJECT {{j+1}}</h4></legend>
              <div [formGroupName]="j">
                <label>Project Name:</label>
                <input formControlName="projectName" /><span><button (click)="deleteProject(comp.controls.projects, j)">Delete Project</button></span>
              </div>
            </div>
            <button (click)="addNewProject(comp.controls.projects)">Add new Project</button>
          </div>
        </div>
      </div>
    </div><br>
    <button (click)="submit(myForm.value)">send</button>
  </form>

.ts

export class AppComponent {

  data = {
    companies: [
      {
        name: "example company",
        projects: [
          {
            projectName: "example project",
          }
        ]
      }
    ]
  }

  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      companies: this.fb.array([])
    })

    this.setCompanies();
  }

  addNewProject(control) {
    control.push(
      this.fb.group({
        projectName: ['']
      }))
  }

  deleteProject(control, index) {
    control.removeAt(index)
  }

  setCompanies() {
    let control = <FormArray>this.myForm.controls.companies;
    this.data.companies.forEach(x => {
      control.push(this.fb.group({ 
        name: x.name, 
        projects: this.setProjects(x) }))
    })
  }

  setProjects(x) {
    let arr = new FormArray([])
    x.projects.forEach(y => {
      arr.push(this.fb.group({ 
        projectName: y.projectName 
      }))
    })
    return arr;
  }

  submit(value) {
    console.log(value);
  }

}

1 Answer 1

2

Because you are using a controlArray you will need to move the input within the scope of the [formGroupName]="i" as formControlName="name" is a child of [formGroupName]="i".

  <legend><h3>COMPANY {{i+1}}: </h3></legend>
        <div [formGroupName]="i">
              <input formControlName="name"/>
Sign up to request clarification or add additional context in comments.

1 Comment

Aha! I had tried that previously but didn't work for some reason.. Thanks for the help :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.