- 首页
- 其他开发
- Angular 4 Form FormArray 添加按钮添加或删除表单输入行
Angular 4 Form FormArray 添加按钮添加或删除表单输入行
[英] Angular 4 Form FormArray Add a Button to add or delete a form input row
本文介绍了Angular 4 Form FormArray 添加按钮添加或删除表单输入行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Angular 4.0.2 构建应用程序.如何向表单添加按钮以添加新的输入行和要删除的特定行的删除按钮?我的意思是我想要一个这样的表格.我希望我的表单看起来像这样:
.
这是我的代码:
add-invoice.component.html
<form [formGroup]="invoiceForm"><div formArrayName="itemRows"><div *ngFor="let itemrow of itemRows.controls; let i=index" [formGroupName]="i"><h4>发票行#{{ i + 1 }}</h4><div class="form-group"><label>项目名称</label><input formControlName="itemname" class="form-control">
<div class="form-group"><label>数量</label><input formControlName="itemqty" class="form-control">
<div class="form-group"><label>单位成本</label><input formControlName="itemrate" class="form-control">
<div class="form-group"><label>税</label><input formControlName="itemtax" class="form-control">
<div class="form-group"><label>数量</label><input formControlName="amount" class="form-control">
<button *ngIf="i > 1" (click)="deleteRow(i)" class="btn btn-danger">删除按钮</button>
<button type="button" (click)="addNewRow()" class="btn btn-primary">添加新行</button></表单><p>{{invoiceForm.value |json}}</p>
这是我的 add-invoice.component.ts 代码
import { Component, OnInit } from '@angular/core';从 '@angular/forms' 导入 { FormBuilder, FormControl, FormArray, FormGroup };@成分({选择器:'app-add-invoice',templateUrl: './add-invoice.component.html',styleUrls: ['./add-invoice.component.css']})导出类 AddInvoiceComponent 实现 OnInit {发票表格:表格组；构造函数(私人_fb:FormBuilder){this.createForm();}创建表单(){this.invoiceForm = this._fb.group({itemRows: this._fb.array([])});this.invoiceForm.setControl('itemRows', this._fb.array([]));}获取 itemRows(): FormArray {将 this.invoiceForm.get('itemRows') 作为 FormArray 返回；}添加新行(){this.itemRows.push(this._fb.group(itemrow));}ngOnInit(){}}
解决方案
这是您的代码的缩短版本:
当您初始化表单时，您可以在 formArray 中添加一个空的表单组:
ngOnInit() {this.invoiceForm = this._fb.group({itemRows: this._fb.array([this.initItemRows()])});}获取 formArr() {返回 this.invoiceForm.get('itemRows') 作为 FormArray;}
然后是函数:
initItemRows() {返回 this._fb.group({//在这里列出你所有的表单控件，它属于你的表单数组项目名称: ['']});}
这是addNewRow 和deleteRow 函数:
addNewRow() {this.formArr.push(this.initItemRows());}deleteRow(索引:数字){this.formArr.removeAt(index);}
您的表单应如下所示:
这是一个
I am building an app using Angular 4.0.2. How can I add a button to a form to add a new row of input and a delete button for a particular row to delete? I mean that I want a form something like this. I want my form to look something like this:
.
Here is my 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>
Here is my code for 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(){
}
}
解决方案
Here's a shortened version of your code:
When you init your form, you can add one empty formgroup inside your formArray:
ngOnInit() {
this.invoiceForm = this._fb.group({
itemRows: this._fb.array([this.initItemRows()])
});
}
get formArr() {
return this.invoiceForm.get('itemRows') as FormArray;
}
Then the function:
initItemRows() {
return this._fb.group({
// list all your form controls here, which belongs to your form array
itemname: ['']
});
}
Here is the addNewRow and deleteRow functions:
addNewRow() {
this.formArr.push(this.initItemRows());
}
deleteRow(index: number) {
this.formArr.removeAt(index);
}
Your form should look like this:
<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>
Here's a
这篇关于Angular 4 Form FormArray 添加按钮添加或删除表单输入行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
