时间戳

首页 > 解决方案 > Angular - 删除我在表单组中添加的最后一个数组

arrays - Angular - 删除我在表单组中添加的最后一个数组

问题描述

在我的NgOnInit()上，我正在创建一个像这样的新表单。

  ngOnInit(){
    this.expenseForm = this.fb.group({
      type: '',
      expenses: this.fb.array([this.buildExpense()])
    })
  }

我有一个名为type的键，它在我的对象上开始为空，还有一个名为costs的键

每次用户单击按钮时，这些费用键都会收到一个数组。

  buildExpense(): FormGroup {
    return this.fb.group({
      description: '',
      quantity: '',
      price: ''
    })
  }

  addExpense(): void {
    this.expenses.push(this.buildExpense())
  }

html

  <button class="btn btn-outline-primary add" type="button" (click)="addExpense()">Add Expense</button>

我的目标是删除我的表单组中添加的最后一个数组

标签： arraysangularangular-reactive-formsformgroups

解决方案

我认为您想删除 formArray 费用的最后一个元素。首先为费用创建 get()，如下所示

get expenses(): FormArray {
    return this.expenseForm.get('expenses') as FormArray;
  }

然后从formArray费用中删除最后一个元素

deleteExpense()
{
  if(this.expenses.length > 0)
  this.expenses.removeAt(this.expenses.length-1);
}

推荐阅读