Question

我有一个这样的表格

<form>
 <div class="col-lg-3 col-md-3 col-sm-12">
     <mat-form-field class="example-full-width">
        <input type="text" matInput placeholder="Percent"  formControlName="txtTaxLinePerc"   (change)="changeTotal()">
         <span matSuffix>%</span>            
      </mat-form-field>
  </div>    
 <div class="col-lg-3 col-md-3 col-sm-12">
     <mat-form-field class="example-full-width">
       <input type="text" matInput placeholder="Percent"  formControlName="txtCompoundTaxPerc" (change)="changeTotal()">
        <span matSuffix>%</span>            
      </mat-form-field>
  </div>
<form>
<span>{{get added value}}</span>

这是我的密码

 get txtTaxLinePerc()  {   
    return this.addTaxTypeForm.controls.txtTaxLinePerc
  }

  get txtCompoundTaxPerc()  { 
    return this.addTaxTypeForm.controls.txtCompoundTaxPerc
    }

我想显示txtTaxLinePerc和txtCompoundTaxPerc的附加值我怎么能这样做。

我已尝试添加{{txtTaxLinePerc.value+txtCompoundTaxPerc.value}}，但它不添加它只是连接像20+40这样的值，它会给2040

Answer 1

<span>{{txtTaxLinePerc + txtCompoundTaxPerc}}</span>

并更改您的.ts文件

get txtTaxLinePerc()  {   
  return this.addTaxTypeForm.controls.txtTaxLinePerc.value
}

get txtCompoundTaxPerc()  { 
  return this.addTaxTypeForm.controls.txtCompoundTaxPerc.value
}

因为现在你返回一个AbstractControl而你想从中获取值

Answer 2

试试这个

{{txtTaxLinePerc + txtCompoundTaxPerc}}

对组件文件的更改

get txtTaxLinePerc()  {   
  return this.addTaxTypeForm.controls.txtTaxLinePerc.value
}

get txtCompoundTaxPerc()  { 
  return this.addTaxTypeForm.controls.txtCompoundTaxPerc.value
}

Answer 3

在您的组件类

中

sum: any

并在changeTotal（）方法中

 changeTotal(){
     ...
    sum = txtTaxLinePerc  +txtCompoundTaxPerc;
    ...
    }

将此总和绑定在范围

<span>{{sum}}</span>

Answer 4

如果要使用ReactiveForms，则必须向表单添加formGroup指令。然后，您可以通过addTaxTypeForm.get('txtTaxLinePerc').value获取输入值。

所以你可以编辑你的gettes

get txtTaxLinePerc()  {   
    return this.addTaxTypeForm.get('txtTaxLinePerc').value
}

get txtCompoundTaxPerc()  { 
    return this.addTaxTypeForm.get('txtCompoundTaxPerc').value
}

在你的HTML中：

{{ txtTaxLinePerc + txtCompoundTaxPerc}}

想要在角度2中的{{}}中添加两个值

4 个答案: