html - ¿Enviar el valor de entrada con valores de formArray?

Tengo un FormArray que puede ingresar nuevos campos y puede enviar el valor de todo el formulario al hacer clic en un botón, sin embargo, estoy intentando agregar un input que esté vinculado al name dentro del mismo objeto de datos, pero no puedo lograr que se muestre, y mucho menos enviarlo junto con el resto de los datos actualizados...

Aquí está mi 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);
  }

}

Respuesta #1

Debido a que está utilizando un controlArray, necesitará mover la entrada dentro del alcance de [formGroupName]="i" ya que formControlName="name" es un hijo de [formGroupName]="i".

  <legend><h3>COMPANY {{i+1}}: </h3></legend>
        <div [formGroupName]="i">
              <input formControlName="name"/>