两个输入相乘Angular

Question

我想从 2 个输入（NUM_PRECIO_UNITARIO 和 NUM_PORCENTAJE_IVA 中获取值并直接显示其他输入的乘法结果 (NUM_VALOR_IVA) 其实这是我的 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,
    })  
}

这是前面的结果

但在我的表单中，值没有改变

Answer 1

在函数中创建以乘以组件 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;
}

在 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 用于表单输入（您可以将其用于同一页面上的其他内容）。

两个输入相乘Angular

Multplication two inputs Angular

javascript

angular

angular4-forms