Question

在我的 NgOnInit（）上，我正在创建一个新的表单。

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

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

的键。每次用户单击按钮时，

这些费用键都会收到一个数组。

  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>

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

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);
}

Answer 2

根据我对要删除最后一个数组的问题的不确定性，请使用pop方法说是否有删除方法：

<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);
      }
}

角度-删除我添加到表单组的最后一个数组

2 个答案: