Sending input value with formArray values?

Question

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

}

Answer 1

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