相关疑难解决方法(0)

Angular 4 Form FormArray添加一个按钮来添加或删除表单输入行

我正在使用Angular 4.0.2构建一个应用程序.如何向表单添加按钮以添加新行输入和删除特定行的删除按钮?我的意思是我想要一个像这样的表格.我希望我的表单看起来像这样:

表格图像.

这是我的代码:

附加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 …
Run Code Online (Sandbox Code Playgroud)

forms angular2-forms angular

27
推荐指数
1
解决办法
5万
查看次数

标签 统计

angular ×1

angular2-forms ×1

forms ×1