Angular 5添加，删除单击按钮上的行

Question

在角度5中，我想添加新行并删除新的行按钮，以便您将向表中添加新行并在单击按钮时删除该行。但是，当我尝试这个代码时，它显示错误就像

ERROR TypeError: Cannot read property 'errors' of undefined

这是我尝试过的

event-create.component.html看起来像这样

<div class="container col-md-12">
  <h1 class="page-header">Create Event</h1>
  <form [formGroup] = "form" (ngSubmit)="onEventSubmit()">
  <fieldset>
    <div class="form-group">
      <label for="eventname">Event Name</label>
      <div class='form-group'>
        <input type="text" class="form-control" autocomplete="off" placeholder="Event Name" formControlName="eventname">
      </div>
    </div>

    <div class="form-group">
      <label for="eventdesc">Event Description</label>
      <div class='form-group'>
        <input type="text" class="form-control" autocomplete="off" placeholder="Event Description" formControlName="eventdesc">
      </div>
    </div>

    <h4>Event Package</h4>
    <hr>
    <div class="row" formGroupName="itemRows">
      <div class="form-group col-md-4">
        <label for="packagename">Package Name</label>
        <input type="text" class="form-control" autocomplete="off" placeholder="Package Name" name="packagename" >
      </div>
      <div class="form-group col-md-2">
        <label for="packageprice">Package Price</label>
        <input type="number" class="form-control" autocomplete="off" placeholder="Package Price" name="packageprice" >
      </div>
      <div class="form-group col-md-2">
        <label for="packagelimit">Max Purchase Limit</label>
        <input type="number" class="form-control" name="packagelimit" autocomplete="off" >
      </div>
      <div class="form-group col-md-2">
        <br/>
        <input type="button" (click)="addPackageRow()" class="btn btn-md btn-success" value="Add New Package" name="">
      </div>
    </div>
    <input type="submit" class="btn btn-primary" value="Submit">

  </fieldset>
</form>
</div>

event-create.component.ts看起来像这样

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormControlName } from '@angular/forms/src/directives/reactive_directives/form_control_name';

@Component({
  selector: 'app-event-create',
  templateUrl: './event-create.component.html',
  styleUrls: ['./event-create.component.css']
})
export class EventCreateComponent implements OnInit {

  form :  FormGroup;

  constructor(
    private formBuilder : FormBuilder,
    ) { this.createEventForm(); }

  createEventForm() {
    this.form = this.formBuilder.group({
      eventname: ['', Validators.compose([
        Validators.required,
        Validators.minLength(5)
      ])],
      eventdesc: ['', Validators.required],
      packagename: ['',],
      packageprice: ['',],
      packagelimit: ['',]
    })
  }

  ngOnInit() {
    this.form = this.formBuilder.group({
        itemRows: this.formBuilder.array([this.initItemRows()])
      });
  }

  initItemRows() {
        return this.formBuilder.group({
            itemname: ['']
        });
    }

  public addPackageRow() {
    console.log(this.form);
     // const control = this.form.controls['itemRows'];
    // control.push(this.initItemRows());
  }

}

我不知道这里出了什么问题。有人能告诉我如何使这项工作？ Anu的帮助和建议将非常明显。

Answer 1

您可以查看此组件以获取有关相同GIT-LINK的更多信息。

相同的check the Address in the form的实例

要旨

  ngOnInit() {
    this.user = new FormGroup({
      addresses: new FormArray([
        this.initAddress(), 
      ])
    });

 initAddress(){
    return new FormGroup({
      street : new FormControl(''),
      postcode : new FormControl('')
    });
  }

  addAddress(){
    const control = <FormArray>this.user.controls['addresses'];
    control.push(this.initAddress());
  }

  removeAddress(i: number){
    const control = <FormArray>this.user.controls['addresses'];
    control.removeAt(i);
  }