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

Question

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

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

我有一个名为 type 的 key，它在我的对象上开始为空，还有一个名为 expenses[=29 的键=]

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

  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>

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

Answer 1

根据我对你想删除最后一个数组的问题的理解，所以使用 pop 方法说是否有 delete 方法：

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

所以我们可以创建一个方法

     deleteExpense() : void {
    let index = this.expenses.length-1;
 if(index){
        (this. expenseForm.get(
          'expenses'
        ) as FormArray).removeAt(index);
      }
}

Answer 2

我认为您要删除 formArray 的最后一个元素开销。首先为费用创建 get() 如下

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

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

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