모 4 양식 FormArray 추가 버튼을 추가하거나 삭제하려면 양식에 입력 행

Question

원본 비 AMP 버전 편집

모 4 양식 FormArray 추가 버튼을 추가하거나 삭제하려면 양식에 입력 행

나는 응용 프로그램을 구축하여 각 4.0.2. 할 수 있는 방법 추가 버튼을 양식이 새로운 행을 추가 입력 및 삭제 버튼을 특정 행을 삭제 하시겠습니까? 내 말은 내가 원하는 형태는 이렇습니다. 나는 나의 양식은 다음과 같이 보일 것입니다:

.

여기에는 나의 코드:

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>

여기에는 나의 코드를 추가로 납부합니다.구성 요소입니다.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(){

  }
}

halfer

편집된 질문9일 12월 2017 в 11:39

프로그래밍

forms angular angular2-forms

20일 4월 2017 в 12:48

1뷰

질문에 대한 의견 (8)

AJT82 · Accepted Answer · 2017-04-20T13:50:48+00:00

여기's 을 줄의 코드:

할 때 init 의 양식을 중 하나를 추가할 수 있습 빈 formgroup 내부 formArray:

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

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

그런 다음 기능:

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

여기에는addNewRow과deleteRow기능:

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

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

의 양식은 다음과 같이 나타나야 합니다.


  <div formArrayName="itemRows">
    <div *ngFor="let itemrow of formArr.controls; let i=index"  [formGroupName]="i">
      <h4>Invoice Row #{{ i + 1 }}</h4>
      <div>
        Item Name
        <input formControlName="itemname">
      </div>

        Delete

    </div>
  </div>
  Add new Row

여기's

모 4 양식 FormArray 추가 버튼을 추가하거나 삭제하려면 양식에 입력 행

DEMO