Sum of elements of my formgroup with ngmodel returns NAN

0

I am in the following scenario:

I have an input called "Stock". This input can be changed as long as the product has no variation.

If the product has variation, I must add the inventory quantity of the variations and put the result in this input called Inventory, and apply a disabled.

The problem is that products can have N variations, so I must add up all the stocks of these "N" variations and put them in my input field.

Currently I did the following, which works palliably, however with some problems that I can not put into production:

My template:

Stock Input:

<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>

This function adds a variation to my product:

<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>

My typescript:

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()])

    });

  }

My function that creates the form group:

// Creates a new form group. If it receives the product parameter it fills with the received values (in case of update this function is called to copulate the data). If you did not receive the parameter, increment the formgroup with default values

  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 is my function responsible for adding the stocks and returning to this.produtos.estoque, it is triggered when keyup happens in some stock input of my variation:

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

Issues:

1- If I do not add any variation and put a number directly into the Inventory field of my ngModel, the value is entered normally.

2- If I add a variation and add a stock value to that variation, my ngmodel is added and everything works perfectly.

The problem happens when I enter more than one variation at a time without filling in the value of the first one before.

My sum is only realized if I fill in all the values of the inputs of my variations. If I leave a variation without populating the stock, my ngModel this.product is like NAN.

    
asked by anonymous 05.11.2018 / 20:21

0 answers