Sending input value with formArray values? - html

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