带有 ngmodel 的表单组的元素总和返回 NAN

Question

我处于以下场景：

我有一个名为“库存”的输入。只要产品没有变化，就可以更改此输入。

如果产品有变体，我必须添加变体的库存数量，并将结果放入这个名为 Inventory 的输入中，并应用禁用。

问题是产品可以有 N 个变体，所以我必须将这些“N”个变体的所有库存加起来并输入我的输入字段。

目前我做了以下工作，效果很好，但有一些我无法投入生产的问题：

我的模板：

我的库存输入：

<input [class.disabled]="controls[0] > 0" [(ngModel)]="produto.estoque" type="text" mask="0000000000"
name="estoque" id="estoque" class="form-control">
   <label [class.disabled]="controls[0] > 0" [class.active]="produto.estoque != null || produto.estoque > 0"
   id="labelestoque" for="estoque">Estoque</label>

此功能为我的产品添加了一个变体：

<div class="col-12 col-md-4 col-lg-3">
   <button (click)="addVariacao()" type="button" class="btn btn-primary waves-effect"><i class="fa fa-plus-square create-icon"
      aria-hidden="true"></i>Adicionar variação</button>
</div>
<form *ngIf="mostraVariacoes" [formGroup]="variacaoForm">
<ng-container *ngFor="let item of variacoes.controls; let i = index;">
   <div class="container-fluid animated fadeIn" [formGroup]="item">
      <div class="col-12 col-md-2">
         <div class="md-form form-lg input-modal">
            <input mask="000000000000" [(ngModel)]="controls[i]" (keyup)="soma($event)" #inputestoque type="text"
            name="estoque_variacao{{i}}" class="form-control" id="estoque_variacao{{i}}" formControlName="estoque_variacao">
            <label [class.active]="inputestoque.value != ''" for="estoque_variacao{{i}}">Estoque</label>
         </div>
      </div>
   </div>
</ng-container>
</form>
</div>

我的打字稿：

public controls = {};
produto: Produtos = new Produtos;

 ngOnInit() {
    this.produto.estoque = null;

    //Ao iniciar a tela deve carregar o formgroup padrão das variações
    this.variacaoForm = this.fb.group({

      variacoes: this.fb.array([this.createFormGroup()])

    });

  }

我创建表单组的函数：

// 创建一个新的表单组。如果它接收到产品参数，它会用接收到的值填充（在更新的情况下，调用此函数来复制数据）。如果您没有收到参数，请使用默认值递增表单组

createFormGroup(produto?: any, indice?: number): FormGroup {
    if(produto){
      return this.fb.group({
        valor: produto.variacao[indice].valor,
        preco: produto.variacao[indice].preco,
        sku: produto.variacao[indice].sku,
        tipo: produto.variacao[indice].tipo,
        estoque_variacao: produto.variacao[indice].estoque_variacao, 
        foto_prin_1: produto.variacao[indice].foto_prin_1,
        foto_prin_2: produto.variacao[indice].foto_prin_2,
        foto_prin_3: produto.variacao[indice].foto_prin_3,
        foto_prin_4: produto.variacao[indice].foto_prin_4,
        foto_prin_5: produto.variacao[indice].foto_prin_5,
        foto_prin_6: produto.variacao[indice].foto_prin_6,
        id: '',
        id_produto: '',
        created_at: ''
      });
    }else{
    return this.fb.group({
      tipoProduto: '',
      valor: '',
      preco: null,
      sku: '',
      tipo: '',
      id: '',
      id_produto: '',
      estoque_variacao: 0,
      linkfotovariacao: '',
      created_at: '',
      foto_prin_1: '',
      foto_prin_2: '',
      foto_prin_3: '',
      foto_prin_4: '',
      foto_prin_5: '',
      foto_prin_6: ''
    });
  }
}

这是我负责添加股票并返回 this.produtos.estoque 的函数，当我的变体的某些股票输入中发生 keyup 时触发它：

soma(){
      let sum = 0;
      Object.keys(this.controls).map(key => {
        sum +=  +this.controls[key];
      });
      this.produto.estoque = sum;
    }

1- 如果我不添加任何变体，直接在我的 ngModel 的 Inventory 字段中输入一个数字，则该值是正常输入的。

2- 如果我添加一个变体并在此范围内添加一个库存值，我的 ngmodel 会被添加并且一切正常。

当我一次输入多个变体而没有填写之前第一个变体的值时，就会出现问题。

只有当我填写我的变体输入的所有值时，我的总和才会实现。如果我留下一个没有填充库存的变体，我的 ngModel this.producto.estoque 代表 NAN。

对不起我的英语

Answer 1

您的解决方案是在将controls[key] 添加到sum 之前检查controls[key] 的值是否为数字：

soma(){
   let sum = 0;
   Object.keys(this.controls).map(key => {
     sum +=  isNan(this.controls[key]) ? 0 : this.controls[key];
   });
   this.produto.estoque = sum;
 }

问候，