CODEWITHSUNDEEP
angularbuttonclickrowaddition
Nancy
Nancy

Reputation: 1011

How to add a new row on click of a button in angular 4

enter image description hereI have the below code to create a row and a button Add Person. On click of Add person , i want to create one more row with Person 2, Person 3 and so on. enter image description here . How can I achieve it.

<div class="splitTheBill-row">
        <div class="splitTheBill-left">
          <div class="userIcon">
            <div class="splitTheBill-user">
              <img src="assets/images/person.png" alt="My Profile">
            </div>
            <div class="input-field national-id pull-left">
              <input id="form3" class="form-control" type="text">
              <label for="form3" class="">Person 1</label>
            </div>
          </div>
        </div>
        <div class="splitTheBill-right">
          <div class="input-field national-id pull-left">
            <input id="form4" class="form-control" type="text">
          </div>
        </div>
      </div>
      <div class="addperson-btncont">
        <div class="reg-submitCont">
          <button url="#" class="btn-secondary waves-effect waves-light btn">Add Person</button>
        </div>
      </div>

Upvotes: 1

Views: 3554

Answers (2)

SiddAjmera
SiddAjmera

Reputation: 39432

I think what you're looking for here is a Reactive Form that could add person(s) on the fly to the form:

Here's a minimal Template:

<form [formGroup]="personsForm" (submit)="onFormSubmit()">
  <div formArrayName="persons">
    <div *ngFor="let person of persons; let i = index;" [formGroupName]="i">
      Name: <input type="text" formControlName="name"><br>
      Amount: <input type="text" formControlName="amount">
    </div>
  </div>
  <button type="button" (click)="addPerson()">
    Add Person
  </button>
  <button>
    Submit
  </button>
</form>

Here's the Component Class:

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';

@Component(...)
export class AppComponent {
  personsForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.personsForm = this.fb.group({
      persons: this.fb.array([])
    });
  }

  onFormSubmit() {
    alert(JSON.stringify(this.personsForm.value));
  }

  addPerson() {
    (<FormArray>this.personsForm.get('persons')).push(this.fb.group({
      name: [],
      amount: []
    }));
  }

  get persons() {
    return (<FormArray>this.personsForm.get('persons')).controls;
  }
}

Here's a Sample StackBlitz for your ref.

Upvotes: 2

user184994
user184994

Reputation: 18281

You need to use *ngFor to loop through your persons, like so:

  <div class="splitTheBill-left">
    <div *ngFor="let person of persons">
      <div class="userIcon">
        <div class="splitTheBill-user">
          <img src="assets/images/person.png" alt="My Profile">
        </div>
        <div class="input-field national-id pull-left">
          <input id="form3" class="form-control" type="text">
          <label for="form3" class="">{{person.name}}</label>
        </div>
      </div>
    </div>
  </div>

Then, you can create an array in the TS that represents the people:

  persons = [
      {"name": "Person 1"}
  ]

And to add a new row, all you need to do is push a new person into that array

  this.persons.push({"name": "Person " + (this.persons.length + 1)})

Take a look at the official tutorial for more info

Upvotes: 4

Related Questions