如何将2个输入数字相加并在使用Typescript Form Group时提交

Question

我有这个ts代码

item: Products[] = [];
this.myForm = this.fb.group({
    'Quantity': new FormControl('', Validators.required),
    'Price': new FormControl('', Validators.required),
    'Total': new FormControl('', Validators.required)
});

我的功能提交

onAdd(){
    console.log(this)
}

Html代码：

<form [formGroup]="myForm" (ngSubmit)="onAdd()" >

    <div class="input-field col s12">
      <input formControlName="Quantity" id="Quantity " type="number">
    </div>
    <div class="input-field col s12">
      <input formControlName="Price" id="Price" type="number">
    </div>
    <div class="input-field col s12">
     <div style="text-align:left;">
      Subtotal:
      <input formControlName="Total" id="Subtotal" type="number"> 
    </div>
  </div>

1. 我想计算自动总数=数量*价格
2. 提交我的总价值。

Answer 1

要获得总数，您需要将[（ngModel）]添加到输入中并创建一个添加逻辑的函数。并在您的小计值中调用该函数，如

  <form [formGroup]="myForm" (ngSubmit)="onAdd()" >

        <div class="input-field col s12">
          <input formControlName="Quantity" id="Quantity " type="number">
        </div>
        <div class="input-field col s12">
          <input formControlName="Price" id="Price" type="number">
        </div>
        <div class="input-field col s12">
         <div style="text-align:left;">
          Subtotal:
<input formControlName="Total" type="text" value='{{ getSum() }}' [(ngModel)]="finalvalue"/>

        </div>
      </div>

你总是可以使用绑定属性{{}}来绑定函数

你需要将这个[（ngModel）] =“finalvalue”发送到你的onAdd（）函数