Angular 7: «Не удается найти элемент управления с неопределенным атрибутом имени» - PullRequest
Новая
       41

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

0 голосов
/ 10 февраля 2019

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

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

ОШИБКАОшибка: «Не удается найти элемент управления с путем:« items -> name »»

ОШИБКА Ошибка: «Не удается найти элемент управления с путем:« items -> height »»

У меня естьпрочитайте несколько ответов 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 ]

0 голосов
/ 10 февраля 2019

Попробуйте объявить ваше 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>
0 голосов
/ 10 февраля 2019

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

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

Ng-run Пример

...