Multplication二つの入力

Question

は実際にこれが私の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> 

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

を変更しないで、あなたのコンポーネントのクラス

にこれらの値を乗算する機能で作成します。

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テンプレートでは、fu nction：

<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を使用していない（あなたが同じページ上の他のもののためにそれを使用することができます）。