4
respostas

Somar dinamicamente todos os campos do FormBuilder.

eu tenho 5 campos do formBuilder. os 5 são preenchidos com dados que vem do banco de dados. mas esses dados podem ser alterados pelo usuario

formulario(result: Dados){
    this.formNum = this.fb.group({
      campo1: result.dado1,
      campo2: result.dado2, 
      campo2: result.dado3,
      campo2 :result.dado4,    
      campo2: result.dado5
      });
}

preciso formar dinamicamente esse form builder. por exemplo, esses inputs tem seus valores iniciais:

input1 => 0.3
input1 => 0.7
input1 => 5
total=> 6

mas o usuário foi e alterou um campo:

input1 => 1
input1 => 0.7
input1 => 5

e o total precisa alterar junto: total=> 6.7

alguma ideia?

4 respostas

Hum... Você pode fazer isso aqui:

  ngOnInit() {
    this.myForm.valueChanges.subscribe((value) => {
      this.soma =
        this.myForm.controls.campo1.value +
        this.myForm.controls.campo2.value +
        this.myForm.controls.campo3.value;
    });
  }

funcionou perfeitamente. mas sigo com uma dúvida: e se caso, o this.soma vier com um outro valor? o total é o total dos inputs, mais uma taxa a parte. o total é calculado em outro componente. e esses inputs são campos q dá p somar ou subtrair valores. por exemplo:

input1 => 0.3
input1 => 0.7
input1 => 5
total=>  15 -> **taxa + os valores do input.**
input1 => 2.3
input1 => 0.7
input1 => 5
total=>  17 -> **taxa + os valores do input.**
input1 => 0
input1 => 0
input1 => 0
total=> 9 -> ** taxa + os valores do input.**

como eu faço p manter esse total e só alterar ele de acordo com o valor dos inputs?

Não tenho certeza se entendi a dúvida. Mas acho que é isso aqui que você quer:

  @Input taxa; //valor vindo de outro componente

  ngOnInit() {
    this.myForm.valueChanges.subscribe((value) => {
      this.soma =
        this.taxa +
        this.myForm.controls.campo1.value +
        this.myForm.controls.campo2.value +
        this.myForm.controls.campo3.value;
    });
  }

acho que não ficou claro o que eu expliquei. os dados iniciais do formulario, seriam recebidos através do retorno da service

recebeDados(){
   this.serviceEndpoint.pegarValores().subscribe(res=> {
       this.retornoService = res.data; //retorno service guarda todos os dados de retorno 
       this.formulario(this.retornoService); 
  });
}

se eu der um

console.log(this.retornoService);

o resultado vem assim:

dado1: 0.9,
dado2: 1.1,
dado3: 2.0,
dado4: 7.0,
total = 29 -> total de tudo mais as taxas``.

aqui eu vou atribuir esse valores para o form

formulario(result: Dados){
    this.formNum = this.fb.group({
      campo1: result.dado1,
      campo2: result.dado2, 
      campo3: result.dado3,
      campo4 :result.dado4,    
      total: result.total
    });
}

aqui esses inputs recebem os valores:

input1(que recebe campo1) => 0.9
input2(que recebe campo2) => 1.1
input3(que recebe campo3) => 2.0
input4(que recebe campo4) => 7.0
total(que recebe total)=>  29 -> **taxa + os valores do input.

e aí, eu queria fazer isso. conforme eu fosse aumentando ou diminuindo os valores dos inputs, fosse alterando no total. por exemplo:

input1(que recebe campo1) => **0.9**
input2(que recebe campo2) => **1.1**
input3(que recebe campo3) => **0**
input4(que recebe campo4) => **7.0**
total(que recebe total)=>  27 -> **taxa + os valores do input.
input1(que recebe campo1) => 0.9
input2(que recebe campo2) => 1.1
input3(que recebe campo3) => 2
input4(que recebe campo4) => 17.0
total(que recebe total)=>  39 -> **taxa + os valores do input.
input1(que recebe campo1) => 
input2(que recebe campo2) => 
input3(que recebe campo3) => 20
input4(que recebe campo4) => 17.0
total(que recebe total)=>  46 -> **taxa + os valores do input.

e conforme fosse alterando e tudo mais, queria q fosse alterando diretamento no total. alguma ideia?