Multplication two inputs Angular

Question

I would like get values from 2 inputs (NUM_PRECIO_UNITARIO and NUM_PORCENTAJE_IVA) and show diamically the result of multplication in other input (NUM_VALOR_IVA) actually this is my html

file.html

<div class="form-group col-sm-5">
    <mat-form-field>                    
        <input matInput type="number" formControlName="NUM_VALOR_IVA" placeholder="Valor IVA" value="{{formDetalleOC.get('NUM_PRECIO_UNITARIO').value * formDetalleOC.get('NUM_PORCENTAJE_IVA').value}}" required>                  
    </mat-form-field>
</div>

file.ts

ngOnInit() {
    this.createControlItemOC
} 

createControlItemOC() {  
    this.formDetalleOC = this.fb.group({         
        NUM_PRECIO_UNITARIO: 0,
        NUM_PORCENTAJE_IVA: 0,   
        NUM_VALOR_IVA: 0,
    })  
}

this is the result in the front

but in my form the value not change

Your template is just rendering a result. If you want to change the model you need to execute code in the component to change the model value, or you need to accept input from the user (e.g. using [(ngModel)]) - but just rendering something to the screen doesn't change anything in the model. — James Gaunt
– James Gaunt, Commented Dec 22, 2017 at 20:46
please could you explain me the solution with more detail I'm new in angular — Andy Torres
– Andy Torres, Commented Dec 22, 2017 at 20:47

Sébastien · Accepted Answer · 2017-12-22 21:07:37Z

3

Create in function to multiply those values in your component's class

calcResult() {
    const o = this.formDetalleOC.get('NUM_PRECIO_UNITARIO').value * this.formDetalleOC.get('NUM_PORCENTAJE_IVA').value; 
    this.formDetalleOC.patchValue({ NUM_VALOR_IVA: o });
    return o;
}

In the HTML template, call that function:

<div class="form-group col-sm-5">
    <mat-form-field>                    
        <input matInput type="number" formControlName="NUM_VALOR_IVA" placeholder="Valor IVA" [value]="calcResult()" required>                  
    </mat-form-field>
</div>

PS: don't use ngModel for your form inputs if you are using FormBuilder (you can use it for other things on the same page).

edited Dec 22, 2017 at 21:07

answered Dec 22, 2017 at 20:50

Sébastien

12.1k12 gold badges60 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andy Torres Over a year ago

thanks so much! this works !! thank you very much, it worked perfect !! Here I leave the complete solution for someone who has the same

Andy Torres Over a year ago

calcResult() { const o = this.formDetalleOC.get('NUM_PRECIO_UNITARIO').value * this.formDetalleOC.get('NUM_PORCENTAJE_IVA').value; this.formDetalleOC.patchValue({ NUM_VALOR_IVA: o }) return o }

Collectives™ on Stack Overflow

Multplication two inputs Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related