typescript - Angular 7: "Kan inte hitta kontroll med ospecificerat namn-attribut"

Jag skapar min första Angular-app och får följande fel i utvecklingskonsolen:

FEL Fel: "Kan inte hitta kontroll med ospecificerat namn-attribut"

FEL Fel: "Kan inte hitta kontroll med sökvägen: 'items -> name'"

FEL Fel: "Kan inte hitta kontroll med sökvägen: 'items -> height'"

Jag har läst flera SO-svar (som detta, detta, detta och detta) men jag kan inte exakt säga vad jag gör fel, min brist på erfarenhet med Angular hjälper inte heller.

Detta är min komponent TypeScript-kod:

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

Och här är min html-komponentkod:

<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>

Jag ser inget stavfel i formControlName="name" och formControlName="height" i typescript-koden. Jag är helt förlorad.

Vad gör jag för fel här?

Svar #1

Du bör inte använda FormArrayName och FormGroupName på samma element:

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

Ng-run Exempel

Relaterade artiklar