Angular 7: "Не удается найти элемент управления с неопределенным атрибутом имени"

Я создаю свое первое приложение Angular и получаю следующие ошибки в консоли режима разработки:

Ошибка: "Не удается найти элемент управления с неопределенным атрибутом имени"

Ошибка: "Не удается найти элемент управления с путем:" элементы -> имя ""

Ошибка: "Не удается найти элемент управления с путем:" элементы -> высота ""

Я прочитал несколько SO-ответов (вроде этого, этого, этого и этого), но я не могу точно определить, что я делаю неправильно, моя неопытность в Angular также не помогает.

Это мой машинописный код компонента:

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);
  }
}

А вот мой HTML-код компонента:

<div>
  <div class="row">
    <h3>Set the box size in meters</h3>
  </div>
  <form [formGroup]="boxForm" (ngSubmit)="onSubmit(boxForm.value)" >
    <div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;" [formGroupName]="i" style="margin-bottom: 10px">
      <div class="form-group">
          <div class="col-sm-5 form-group">
            <label for="name">Name</label>
            <input class="form-control" type="text" formControlName="name" placeholder="Name" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Height</label>
            <input class="form-control" type="text" formControlName="height" placeholder="Height" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Width</label>
            <input class="form-control" type="text" formControlName="width" placeholder="Width" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Length</label>
            <input class="form-control" type="text" formControlName="length" placeholder="Length"/>
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Weight</label>
            <input class="form-control" type="text" formControlName="weight" placeholder="Weight" />
          </div>
        <hr>
      </div>
    </div>
    <button class="btn btn-success" type="submit"  style="margin-right: 10px">Pack</button>
    <button class="btn btn-primary" type="button" (click)="addItem()">New Box</button>
  </form>
</div>

Я не вижу опечатки в formControlName="name" а также formControlName="height" в машинописном коде. Я полностью потерян.

Что я здесь не так делаю?

2 ответа

Решение

Вы не должны использовать FormArrayName и FormGroupName для одного элемента:

<div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;">
  <div class="form-group" [formGroupName]="i" >

Ng-run Пример

Попробуйте объявить ваше formGroupName на один уровень ниже, например:

<div>
  <div class="row">
    <h3>Set the box size in meters</h3>
  </div>
  <form [formGroup]="boxForm" (ngSubmit)="onSubmit(boxForm.value)" >
    <div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;" style="margin-bottom: 10px">
      <div class="form-group" [formGroupName]="i">
          <div class="col-sm-5 form-group">
            <label for="name">Name</label>
            <input class="form-control" type="text" formControlName="name" placeholder="Name" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Height</label>
            <input class="form-control" type="text" formControlName="height" placeholder="Height" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Width</label>
            <input class="form-control" type="text" formControlName="width" placeholder="Width" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Length</label>
            <input class="form-control" type="text" formControlName="length" placeholder="Length"/>
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Weight</label>
            <input class="form-control" type="text" formControlName="weight" placeholder="Weight" />
          </div>
        <hr>
      </div>
    </div>
    <button class="btn btn-success" type="submit"  style="margin-right: 10px">Pack</button>
    <button class="btn btn-primary" type="button" (click)="addItem()">New Box</button>
  </form>
</div>
Другие вопросы по тегам