Как добавить новую строку по нажатию кнопки в угловых 4 - PullRequest
Новая
       105

Как добавить новую строку по нажатию кнопки в угловых 4

0 голосов
/ 09 ноября 2018

enter image description here У меня есть приведенный ниже код для создания строки и кнопка Добавить человека. При нажатии Добавить человека, я хочу создать еще одну строку с Лицом 2, Лицом 3 и так далее. enter image description here. Как мне этого добиться. 

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

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Я думаю, что вы ищете здесь реактивную форму, которая может добавить людей на лету к форме:

Вот минимальный шаблон: 

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

Вот класс компонентов: 

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

Вот Образец StackBlitz для вашей ссылки.

0 голосов
/ 09 ноября 2018

Вам нужно использовать *ngFor, чтобы перебрать своих людей, вот так: 

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

Затем вы можете создать массив в TS, который представляет людей: 

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

И чтобы добавить новую строку, все, что вам нужно сделать, это вставить нового человека в этот массив 

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

Для получения дополнительной информации ознакомьтесь с официальным руководством.

...