Angular 5 add, remove row on click buttons

Question

In angular 5 I want to add new row and remove new row button so that thy will add a new row to the table and delete the row when click on the buttons. But when I am trying this code its showing error like

ERROR TypeError: Cannot read property 'errors' of undefined

Here is what I have tries

event-create.component.html looks like this

<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 looks like this

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

}

I don't know what is going wrong here. Can someone tell me how to make this work? Anu help and suggestions will be really appreciable.

Where is errors property in your code?

Ramesh Rajendran
– Ramesh Rajendran

2018-02-12 10:23:46 +00:00
Commented Feb 12, 2018 at 10:23 — Ramesh Rajendran
– Ramesh Rajendran, Commented Feb 12, 2018 at 10:23
I have added the property in createEventForm() function.

NewUser
– NewUser

2018-02-12 10:25:37 +00:00
Commented Feb 12, 2018 at 10:25 — NewUser
– NewUser, Commented Feb 12, 2018 at 10:25

Rahul Singh · Accepted Answer · 2018-02-12 10:15:40Z

1

You can take a look at this component for more info on the same GIT-LINK.

Live Example for the same check the Address in the form

gist

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

answered Feb 12, 2018 at 10:15

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NewUser Over a year ago

Can you answer my another question? stackoverflow.com/questions/48761002/…

Collectives™ on Stack Overflow

Angular 5 add, remove row on click buttons

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related