How can fix => FormArray. Cannot find control with path

Question

I'm trying to use reactive forms and a formArray to create some forms, but i'm trying and I get this error "FormArray. Cannot find control with path"

I need to bind these fields and update my array to send back to the api later.

I tried changing names, the formcontrolname, formcontrol, formArrayName.


  ngOnInit() {
    this.formGroundUse = this.fb.group({
      published: true,
      groundUses: this.fb.array([])
    });

    this.dataModel = Object.create(null);
    const groudUse = this.formGroundUse.controls.groundUses as FormArray;


    this.tableData.forEach((item, index) => {
      groudUse.push(
        this.fb.group({
          title: new FormControl(item.title),
          value: new FormControl(item.value),
          percentage: new FormControl(item.percentage)
        })
      );

      console.log(groudUse);
    });

  this.formGroundUse.valueChanges
      .subscribe(data => {
        this.dataModel = data;
        console.log('listening');
      });
}

<ng-container formArrayName="groundUses"
            *ngFor="let data of formGroundUse.controls['groundUses']?.controls; let i = index">

            <tr [formGroup]="groundUses.controls[i]">
              <!-- *ngFor="let data of tableData"> -->
              <td class="table-subtitle">{{data.title}} {{i}}</td>
              <td class="input-container">
                <label for="">Área (Ha)</label>
                <!--  formControlName="{{data.title}}"  -->
                <input type="text" [disabled]="!technicalData.edit" class="form-input" [value]="data.value"
                  (change)="updateItem($event)" formControlName="value">
              </td>
              <td>{{data.percentage}}</td>
            </tr>
          </ng-container>

I need to bind these fields to my ts to create some calculations, but i'm getting just the old value in the dataModel.

Paresh Gami Paresh Gami · Accepted Answer · 2019-09-02T07:10:52

There are some mismatch with your given html and ts. No need to use value in textbox formControl take of that thing. You can refer below example.

HTML

<form [formGroup]="formGroundUse">
  <ng-container *ngFor="let data of formGroundUse.controls['groundUses']?.controls; let i = index" formArrayName="groundUses">
    <ng-container [formGroupName]="i">
      <tr>
        <td class="table-subtitle">{{data.title}}</td>
        <td class="input-container">
          <label for="">Área (Ha)</label>
          <input type="text" class="form-input" formControlName="value">
        </td>
        <td>{{data.percentage}}</td>
      </tr>
    </ng-container>
  </ng-container>
</form>
    
<pre>
  {{formGroundUse.value | json}}
</pre>

TS

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray } from '@angular/forms';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'ngrxstore';
  dataModel = {};
  formGroundUse: FormGroup;
  tableData = [
    {
      title: 'Title 1',
      value: 'Value 1',
      percentage: 99.10
    }, {
      title: 'Title 2',
      value: 'Value 2',
      percentage: 90.00
    }
  ];

  constructor(public fb: FormBuilder) {}
    
  ngOnInit(): void {
    this.formGroundUse = this.fb.group({
      published: true,
      groundUses: this.fb.array([])
    });

    const groudUse = this.formGroundUse.controls.groundUses as FormArray;

    this.tableData.forEach((item, index) => {
      groudUse.push(
        this.fb.group({
          title: new FormControl(item.title),
          value: new FormControl(item.value),
          percentage: new FormControl(item.percentage)
        })
      );
    });
  }
}

How can fix => FormArray. Cannot find control with path

1 Answers

HTML

TS