Angular 2 Form "Cannot find control with path"

dowu :

I try to make a dynamic form (so you can limitless add items to a list), but somehow the content of my list is not getting send because it can't find the control with path:

Cannot find control with path: 'list_items -> list_item'

My component:

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {

  listForm: FormGroup;

  constructor(private nodeService: NodeService, private messageService: MessageService, private fb: FormBuilder,
                private listService: ListService) { 
    this.listForm = this.fb.group({
      title: ['', [Validators.required, Validators.minLength(5)]],
      list_items: this.fb.array([
        this.initListItem(),
        ])
    });
  }


  initListItem() {
    return this.fb.group({
      list_item: ['']
    });
  }
  initListItemType() {
    return this.fb.group({
      list_item_type: ['']
    });
  }

  addListItem() {
    const control = <FormArray>this.listForm.controls['list_items'];
    control.push(this.initListItem());
  }

The Template (list.component.html):

<h2>Add List </h2>

<form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)">
  <div class="form-group">
    <input type="text" class="form-control" formControlName="title" placeholder="Title">
  </div>

  <div formArrayName="list_items">
    <div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default">
      {{i + 1}}.) <input type="text" formControlName="list_item" placeholder="List Item" class="form-control">
    </div>
    <a (click)="addListItem()">Add List Item +</a>

  </div>

  <button type="submit">Submit</button>
</form>

The title works just fine, but I can't find the error I have with the "formControlName", which is causing the error.

Thanks in advance for any help in this issue.

Update with what I changed list.component.html

<h2>Add List </h2>

<form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)">
  <div class="form-group">
    <input type="text" class="form-control" formControlName="title" placeholder="Title">
  </div>

  <div formArrayName="list_items">
    <div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default">
      {{i + 1}}.) <input type="text" formControlName="{{i}}" placeholder="List Item" class="form-control">
    </div>
    <a (click)="addListItem()">Add List Item +</a>

  </div>

  <button type="submit">Submit</button>
</form>

And in my component I changed the constructor and my addListItem method:

listForm: FormGroup;

  constructor(private nodeService: NodeService, private messageService: MessageService, private fb: FormBuilder,
                private listService: ListService) { 
    this.listForm = this.fb.group({
      title: ['', [Validators.required, Validators.minLength(5)]],
      list_items: this.fb.array([
          [''],
        ])
    });
  }

  addListItem() {
    const control = <FormArray>this.listForm.controls['list_items'];
    control.push(this.fb.control(['']));
    console.log(control)
  }
Manishnith :

There should be a formControlName in your HTML form mapped to your component file.

<div *ngFor="let list_item of [0,1,2]; let i=index" class="panel panel-default">
  {{i + 1}}.) <input type="text" formControlName="{{i}}" placeholder="List Item" class="form-control">
</div>
list_items: this.fb.array([
    [''], //0 points to this
    [''], //1 points to this
    [''] //2 points to this
])

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Angular Form Array Cannot find control with path

angular 4: nested form fields : Cannot find control with path

Angular 7 and form arrays error of cannot find a control with path

Angular 8 and form arrays error cannot find control with path: index

Cannot Find Control with Path Using ngIf on Recursive Angular Form

Angular 2 Reactive Forms: Cannot find control with path

Error: Cannot find control with path: 'x ' angular 2

Angular Deeply Nested Reactive Form: Cannot find control with path on nested FormArray

Angular Reactive Forms: Cannot find control with path:

Angular FormArray: Cannot find control with path

Angular formArray Cannot find control with path

Form Array: Cannot find control with path: 'list -> description'

"Cannot find control with path" but cannot figure out why - Angular 5

Angular 5 FormArray > Cannot find control with path: 'fields -> 0 -> name'

Angular: Cannot find control with path: 'variable-> 0 -> id'

ERROR Error: Cannot find control with path: Angular FormArray

Angular Error As Cannot find control with path: '_OSkilss -> 0 -> Imageuploade'

Angular Error: Cannot find control with path 'instructions -> 1 ->action'

Angular ngFor in ngFor formControlName : Cannot find control with path

Error: Cannot find control with path: 'specs -> 2' FormArray checkbox list

Building form from json with repeatable inputs: Cannot find control with path formArray

Nested Form Array Woes: ERROR Error: Cannot find control with path: 'questions -> 0 -> code'

Angular. FormArray. Cannot find control with path: 'jobs -> 0 -> name'

Cannot find control with path when displaying dynamic FormControlNames - Angular Reactive Forms

Cannot find control with path: 'plans -> 0'

Cannot find control with path: 'marketplace -> 1 -> marketplace'

ERROR Error: Cannot find control with path

Cannot find control with path 'myFormArray -> [index] -> myProperty

Cannot find control with path: 'members -> 0 ->