当formGroup.length> 1

Question

在表单组之外，我有以下ngModel输入：

<input [class.disabled]="controls[0] > 0" [(ngModel)]="produto.estoque" type="text">

此输入显示我的表单组内输入值的总和。

我有这个表单组：

<form [formGroup]="variacaoForm">
  <ng-container *ngFor="let item of variacoes.controls; let i = index;">
    <input [(ngModel)]="controls[i]" (keyup)="soma($event)" type="text" name="estoque_variacao{{i}}" formControlName="estoque_variacao">

我可以有“ N”个输入。

这实际上是我将输入estoque_variacao相加的函数：

  soma(){
    let sum = 0;

    Object.keys(this.variacaoForm.value.variacoes).map(key => {
      sum +=  +this.variacaoForm.value.variacoes[key].estoque_variacao;
    })
      this.produto.estoque = sum
    }

按照以下步骤，一切都很好：

1. 添加新的表单组；
2. 填写输入estoque_variacao中的值
3. 添加其他表单组
4. 填充第二个输入estoque_variacao的值
5. 总和正确显示在输入produto.estoque
中

问题是当我按照以下步骤操作时：

  

  
1. 添加新的表单组；
  
2. 不填写第一个formGroup的estoque_variacao的值；
  
3. 添加新的表单组；
  
4. 尝试填充表单组第二个输入中的第一个的estoque_variacao会在produto.estoque中返回NAN。
  

创建formGroup的函数：

createFormGroup(): FormGroup {
    return this.fb.group({
         estoque_variacao: 0
}

我该如何解决？

@编辑：

为我工作：

  soma(){
    let sum = 0;

    const value = this.variacaoForm.value.variacoes;

    for(const key in value){
      sum += (+value[key].estoque_variacao);
    }

    this.produto.estoque = sum
  }

当我删除表单组时，我需要减小输入值：

this.produto.estoque = this.produto.estoque - this.variacaoForm.value.variacoes[index].estoque_variacao

Answer 1

您不应同时使用ngModel和FormControlName。实际上，您不应同时使用“模板驱动表单”和“响应表单”。这是两种不同的方法，您需要针对任何给定情况选择一种。

下面是一个示例：https://stackblitz.com/edit/angular-uqvcnb

希望这会有所帮助