Question

我处于以下情况：

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

如果产品具有差异，则必须添加差异的库存数量，并将结果放入名为“库存”的输入中，并应用禁用的产品。

问题在于产品可以有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的功能，当我的变体中的某些库存输入发生击键时将触发该功能：

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

1-如果我不添加任何变体并将数字直接输入到ngModel的“清单”字段中，则该值将正常输入。

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

当我一次输入多个变体而又没有填写第一个变体的值时，就会发生问题。

仅当我填写变体输入的所有值时，我的总和才实现。如果我留下未填写库存的变体，则我的ngModel this.producto.estoque表示为NAN。

对不起，我的英语水平

Answer 1

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

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

此致

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

1 个答案: