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

Question

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

\n\n

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

\n\n

我有一个名为type的键，它在我的对象上以空开头，还有一个名为expenses的键

\n\n

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

\n\n

  buildExpense(): FormGroup {\n    return this.fb.group({\n      description: \'\',\n      quantity: \'\',\n      price: \'\'\n    })\n  }\n\n  addExpense(): void {\n    this.expenses.push(this.buildExpense())\n  }\n

\n\n

网页

\n\n

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

\n\n

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

\n

Answer 1

我想你想删除 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);
}