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

Brian Stanley

I am trying to make a specific form field in my overall form dynamic so that x amount of objects can be added to the array of that field. However, every time the page inits I get a

Error: Cannot find control with path: 'media -> '

This is my form.ts

this.cardForm = new FormGroup({
  'title': new FormControl(cardTitle),
  media: this._fb.array([
    this.initMedia(),
  ]),
  'links': new FormGroup({
    'news': new FormControl(news),
  }),

  initMedia() {
   return this._fb.group({
   type: new FormControl(),
   raw: new FormControl(),
   primary: new FormControl(),
   thumbs: this._fb.group({
    default: new FormControl()
  })
})
}

addMedia(){
 const control = <FormArray>this.cardForm.controls['media'];
 control.push(this._fb.control(['']));
}
removeMedia(i: number){
 const control = <FormArray>this.cardForm.controls['media'];
 control.removeAt(i);
}

this is my form.html:

<div class="row">
  <div class="col-xs-12">
    <form [formGroup]="cardForm" (ngSubmit)="onSubmit(cardForm.value)">
      <div class="row">
        <div class="col-xs-12">
          <button
            type="submit"
            class="btn btn-success">
            Update Card</button>
          <button
            type="button"
            class="btn btn-danger"
            (click)="onCancel()">
            Cancel</button>
        </div>
      </div>

    <div formArrayName="media">
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group">
            <div *ngFor= "let media of cardForm.controls.media.controls; let i=index">
              <span>Media {{i + 1}}</span>
              <span *ngIf="cardForm.controls.media.controls.length > 1" (click)="removeMedia(i)"></span>
          </div>
          <div [formGroupName]="i">
            <div>
              <label>Url</label>
                <md-input-container class="mdcontainer">
                  <input mdInput placeholder="Media Url" type="text" formControlName="raw">
                </md-input-container>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

And the media[] looks like this:

media: [
        {
          raw:'string',
          primary: boolean,
          type: 'string',
          thumb: {
                 default: 'string'
                 {
        }
      ]

What am I missing/doing wrong here for that error to come up? Any help/tips/suggestions would be much appreciated.

yurzui

[formGroupName]="i" should be inside of *ngFor. In this case i variable will have non undefined value

<div *ngFor="let media of cardForm.controls.media.controls; let i=index">
  <span>Media {{i + 1}}</span>
  <span *ngIf="cardForm.controls.media.controls.length > 1" (click)="removeMedia(i)"></span>
  <div [formGroupName]="i">
    <div>
      <label>Url</label>
      <md-input-container class="mdcontainer">
        <input mdInput placeholder="Media Url" type="text" formControlName="raw">
      </md-input-container>
    </div>
  </div>
</div>

Plunker Example

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Angular 2 Form "Cannot find control with path"

ERROR Error: Cannot find control with path: Angular FormArray

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

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

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

Angular 2 Reactive Forms: Cannot find control with path

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

ERROR Error: Cannot find control with path

Angular Form Array Cannot find control with path

Angular Reactive Forms: Cannot find control with path:

Angular FormArray: Cannot find control with path

Angular formArray Cannot find control with path

Angular 6 Forms Cannot find control error

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

ERROR Error: Cannot find control with path: 'flights -> 3'

Get the following error : Error: Cannot find control with path: 'budgetIncomes -> 0 -> '

Angular 2 Reactive Forms cannot find control

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

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

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

Cannot Find Control with Path Using ngIf on Recursive Angular Form

Angular ngFor in ngFor formControlName : Cannot find control with path

Get error: Cannot find control with path: 'excludedPeriods -> 0 -> dateTo'

Angular material stepper: Error: Cannot find control with name: 'formArray'

Angular 4 Error: Cannot find control with unspecified name attribute

Angular 2 Cannot find control with unspecified name attribute on formArrays

Angular2: Cannot find form control at index 1 at FormArray

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