title: Angular 7: "Cannot find control with unspecified name attribute"
body: <p>I am creating my first Angular app and I am getting the following errors in dev mode console:</p>
  <blockquote>
  <p>ERROR Error: &quot;Cannot find control with unspecified name attribute&quot;</p>
  <p>ERROR Error: &quot;Cannot find control with path: 'items -&gt; name'&quot;</p>
  <p>ERROR Error: &quot;Cannot find control with path: 'items -&gt; height'&quot;</p>
  </blockquote>
  <p>I have read several SO answers (like <a href="https://stackoverflow.com/questions/39679637/angular-2-form-cannot-find-control-with-path">this</a>, <a href="https://stackoverflow.com/questions/53831655/cannot-find-control-with-unspecified-name-attribute-in-angular-6-form-builder">this</a> <a href="https://stackoverflow.com/questions/54520391/reactive-formsmodule-in-angular2">this</a> and <a href="https://stackoverflow.com/questions/38594344/angular-2-form-cannot-find-control">this</a>) but I cannot pinpoint what I am doing wrong, my inexperience with Angular is not helping as well.</p>
  <p>This is my component typescript code:</p>
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
  
  @Component({
    selector: 'app-pack-input',
    templateUrl: './pack-input.component.html',
    styleUrls: ['./pack-input.component.css']
  })
  export class PackInputComponent implements OnInit {
    public boxForm: FormGroup;
  
    constructor(private formBuilder: FormBuilder) {  }
  
    ngOnInit() {
      this.boxForm = this.formBuilder.group({
        items: this.formBuilder.array([this.createBox()])
      });
    }
  
    createBox(): FormGroup {
      return this.formBuilder.group({
        name: ['', [Validators.required, Validators.minLength(3)]],
        height: ['', [Validators.required, Validators.minLength(3)]],
        width: ['', [Validators.required, Validators.minLength(3)]],
        length: ['', [Validators.required, Validators.minLength(3)]],
        weight: ['', [Validators.required, Validators.minLength(3)]]
      });
    }
  
    get items(): FormArray {
      return this.boxForm.get('items') as FormArray;
    }
  
    addItem(): void {
      this.items.push(this.createBox());
    }
  
    public onSubmit(formValue: any) {
      console.log(formValue);
    }
  }
  </code></pre>
  <p>And here is my html component code:</p>
  <pre><code>&lt;div&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;h3&gt;Set the box size in meters&lt;/h3&gt;
    &lt;/div&gt;
    &lt;form [formGroup]=&quot;boxForm&quot; (ngSubmit)=&quot;onSubmit(boxForm.value)&quot; &gt;
      &lt;div class=&quot;row&quot; formArrayName=&quot;items&quot; *ngFor=&quot;let item of items.controls; let i = index;&quot; [formGroupName]=&quot;i&quot; style=&quot;margin-bottom: 10px&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class=&quot;col-sm-5 form-group&quot;&gt;
              &lt;label for=&quot;name&quot;&gt;Name&lt;/label&gt;
              &lt;input class=&quot;form-control&quot; type=&quot;text&quot; formControlName=&quot;name&quot; placeholder=&quot;Name&quot; /&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-sm-3 form-group&quot;&gt;
              &lt;label for=&quot;name&quot;&gt;Height&lt;/label&gt;
              &lt;input class=&quot;form-control&quot; type=&quot;text&quot; formControlName=&quot;height&quot; placeholder=&quot;Height&quot; /&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-sm-3 form-group&quot;&gt;
              &lt;label for=&quot;name&quot;&gt;Width&lt;/label&gt;
              &lt;input class=&quot;form-control&quot; type=&quot;text&quot; formControlName=&quot;width&quot; placeholder=&quot;Width&quot; /&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-sm-3 form-group&quot;&gt;
              &lt;label for=&quot;name&quot;&gt;Length&lt;/label&gt;
              &lt;input class=&quot;form-control&quot; type=&quot;text&quot; formControlName=&quot;length&quot; placeholder=&quot;Length&quot;/&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-sm-3 form-group&quot;&gt;
              &lt;label for=&quot;name&quot;&gt;Weight&lt;/label&gt;
              &lt;input class=&quot;form-control&quot; type=&quot;text&quot; formControlName=&quot;weight&quot; placeholder=&quot;Weight&quot; /&gt;
            &lt;/div&gt;
          &lt;hr&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button class=&quot;btn btn-success&quot; type=&quot;submit&quot;  style=&quot;margin-right: 10px&quot;&gt;Pack&lt;/button&gt;
      &lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot; (click)=&quot;addItem()&quot;&gt;New Box&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I see no typo in the <code>formControlName=&quot;name&quot;</code> and <code>formControlName=&quot;height&quot;</code> in the typescript code. I am totally lost.</p>
  <p>What am I doing wrong here?</p>