乘以两个输入角答案

【问题标题】：Multplication two inputs Angular乘以两个输入角
【发布时间】：2017-12-22 20:41:31
【问题描述】：

我想从 2 个输入（NUM_PRECIO_UNITARIO 和 NUM_PORCENTAJE_IVA）中获取值，并在其他输入（NUM_VALOR_IVA）中显示相乘结果实际上这是我的html

文件.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>

文件.ts

ngOnInit() {
    this.createControlItemOC
} 

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

这是前面的结果

但在我的表单中，值不会改变

【问题讨论】：

您的模板只是呈现结果。如果你想改变模型，你需要在组件中执行代码来改变模型值，或者你需要接受用户的输入（例如使用 [(ngModel)]）——但是仅仅在屏幕上渲染一些东西是不行的更改模型中的任何内容。
请你更详细地解释一下我的解决方案我是角度新手

标签： javascript angular angular4-forms

【解决方案1】：

在函数中创建以乘以组件类中的这些值

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

在 HTML 模板中，调用该函数：

<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：如果您使用FormBuilder，请不要将ngModel 用于您的表单输入（您可以将它用于同一页面上的其他内容）。

【讨论】：

非常感谢！这行得通！非常感谢，效果很好！！在这里，我将完整的解决方案留给有相同情况的人
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 }