Getting Error: Cannot find control '0' when implementing FormArray as shown in Google doc guide

[qdouble]

• I'm submitting a ...
• bug report

Current behavior
When implementing FormArray as shown in guide: https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

I get an error >browser_adapter.js:77 Error: Cannot find control '0'

You can see the issue here: https://plnkr.co/edit/ir19tuktTqcfGeG8pu2G?p=preview

• Angular version: 2.0.0-rc.2 ... edited
• Browser: [all]
• Language: [TypeScript]

[ericmartinezr]

@qdouble you have to match the formControlName in the FormGroup

<div *ngFor="let city of cityArray.controls; let i=index" >
    <input [formControlName]="i">
</div>

form = new FormGroup({
     cities: this.cityArray,
     0 : new Control(),
     1 : new Control(),
     etc...
   });

Since you're using the index as the name of the control, the controls key should be numbers.

I would say it's more something missing in the doc than a bug, although I may be wrong.

cc @kara

[qdouble]

@ericmartinezr that doesn't appear to work either. I see they've labeled it, so I suppose it is indeed a bug.

[kara]

The planned updates to forms are still very much in progress, so a few things in the proposal doc aren't implemented yet and are slated for the next release (namely, formArrayName and form level updateValue). I've updated the original proposal doc to clarify these are still to come.

I'll keep this issue open so it's easier to track its completion. Sorry for the confusion!

[tom10271]

Is it possible to make FormArray fallback to its controls[0] for controls[1] when controls[1] is missing?

I am building a Angular 2 Form generator. It generates proper FormGroup, FormArray, FormControl but I am stucked as when generating form according to object schema I don't know how many objects contained inside FormArray.

Generated Form equivalent:

this.form = new FormGroup({
    myArr: new FormArray([
        new FormControl('')
    ])
})

When I set value -> this.form.setValue({ myArray: ['val1', 'val2'] }), it returns error: main.js:80313 EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: Cannot find form control at index 1

I understand the reason why, but it can be fixed if Angular 2 Form can fall back to myArr.controls[0] for all sibilings Form.

Thanks

[ZokiPokiDev]

Maybe this will help you as an idea

const controlName = new FormControl(null);
    const controlEmail = new FormControl(null, [
      Validators.pattern(EMAIL_REGEX)
    ]);
    const controlPhone = new FormControl(null);
    const group = new FormGroup({
      'name': controlName,
      'email': controlEmail,
      'phone': controlPhone 
    });
    (<FormArray>this.editEvent.get('contact')).push(group);

[Swapnil25594]

I was ecountering same issue. This way it helped me.

this.invoiceForm = this._fb.group({
      patterns: this._fb.array([new FormControl('')]),
    });

<form [formGroup]="invoiceForm">
          <div formArrayName="patterns"> 
            <div *ngFor="let pattern of invoiceForm.controls.patterns.controls ; let i = index">
              <br>
              <h6>Pattern {{i+1}}</h6>
              <button type="submit" class='"btn btn-warning pull-right" (click)="deletePatterns(i)"> Remove</button>
              <div>
                <label>Value</label>
                <input formControlName="{{i}}" placeholder="Text" class="form-control">
              </div>
            </div>
          </div>
 </form> 

[upardhi]

Hi Guys,

I am also facing the same issue. When I click on add hotspot it is throwing an error "No value accessor for 'hotspots -> 0'"

Please help me

http://plnkr.co/edit/p2NCCb?p=preview