wake-up-neo.net

Angular 4 Form FormArray Fügen Sie eine Schaltfläche hinzu, um eine Formulareingabezeile hinzuzufügen oder zu löschen

Ich erstelle eine App mit Angular 4.0.2. Wie kann ich einem Formular eine Schaltfläche zum Hinzufügen einer neuen Eingabezeile und eine Löschschaltfläche für eine bestimmte Zeile zum Löschen hinzufügen? Ich möchte, dass ein Formular ungefähr so ​​aussieht:

Form Image.

Hier ist mein Code:

add-invoice.component.html

    <h3 class="page-header">Add Invoice</h3>
    <form [formGroup]="invoiceForm">
      <div formArrayName="itemRows">
        <div *ngFor="let itemrow of itemRows.controls; let i=index" [formGroupName]="i">
          <h4>Invoice Row #{{ i + 1 }}</h4>
          <div class="form-group">
            <label>Item Name</label>
            <input formControlName="itemname" class="form-control">
          </div>
          <div class="form-group">
            <label>Quantity</label>
            <input formControlName="itemqty" class="form-control">
          </div>
          <div class="form-group">
             <label>Unit Cost</label>
             <input formControlName="itemrate" class="form-control">
          </div>
          <div class="form-group">
            <label>Tax</label>
            <input formControlName="itemtax" class="form-control">
          </div>
          <div class="form-group">
            <label>Amount</label>
            <input formControlName="amount" class="form-control">
          </div>
          <button *ngIf="i > 1" (click)="deleteRow(i)" class="btn btn-danger">Delete Button</button>
        </div>
      </div>
      <button type="button" (click)="addNewRow()" class="btn btn-primary">Add new Row</button>
    </form>
    <p>{{invoiceForm.value | json}}</p>

Hier ist mein Code für add-invoice.component.ts

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

@Component({
  selector: 'app-add-invoice',
  templateUrl: './add-invoice.component.html',
  styleUrls: ['./add-invoice.component.css']
})

export class AddInvoiceComponent implements OnInit {
  invoiceForm: FormGroup;

  constructor(
    private _fb: FormBuilder
  ) {
    this.createForm();
  }

  createForm(){
    this.invoiceForm = this._fb.group({
      itemRows: this._fb.array([])
    });
    this.invoiceForm.setControl('itemRows', this._fb.array([]));
  }

  get itemRows(): FormArray {
    return this.invoiceForm.get('itemRows') as FormArray;
  }

  addNewRow(){
    this.itemRows.Push(this._fb.group(itemrow));
  }

  ngOnInit(){

  }
}
24
Climb Tree

Hier ist eine verkürzte Version Ihres Codes:

Wenn Sie Ihr Formular einleiten, können Sie eine leere Formulargruppe in Ihrem formArray hinzufügen:

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

get formArr() {
  return this.invoiceForm.get('itemRows') as FormArray;
}

Dann die Funktion:

initItemRows() {
  return this._fb.group({
    // list all your form controls here, which belongs to your form array
    itemname: ['']
  });
}

Hier sind die Funktionen addNewRow und deleteRow:

addNewRow() {
  this.formArr.Push(this.initItemRows());
}

deleteRow(index: number) {
  this.formArr.removeAt(index);
}

Ihr Formular sollte folgendermaßen aussehen:

<form [formGroup]="invoiceForm">
  <div formArrayName="itemRows">
    <div *ngFor="let itemrow of formArr.controls; let i=index"  [formGroupName]="i">
      <h4>Invoice Row #{{ i + 1 }}</h4>
      <div>
        <label>Item Name</label>
        <input formControlName="itemname">
      </div>
      <button type="button" (click)="deleteRow(i)" *ngIf="formArr.controls.length > 1" >
        Delete
      </button>
    </div>
  </div>
  <button type="button" (click)="addNewRow()">Add new Row</button>
</form>

Hier ist ein

DEMO

53
AJT82