Html 如何将金额从输入字段绑定到按钮？

我正在尝试绑定html表单上的total Amount to pay按钮。我在.ts文件中创建了函数来计算总金额。为了验证我的表单，我使用FormGroup和formBuilder。这是我的打字稿：

import { Component, OnInit, OnChanges } from '@angular/core';

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements OnInit {
paymentForm: FormGroup;
totalAmount: number;

  constructor() { }

     constructor(private formBuilder: FormBuilder, private appService: AppService) { }

  ngOnInit() {
    this.paymentForm = this.formBuilder.group({
      'tenName': ['', Validators.required],
      'appAddress': ['', Validators.required],
      'textArea': ['', Validators.required],
      'phoneNumber': ['', [Validators.required, Validators.maxLength(11)]],
      'emailAddress': ['', [Validators.required, Validators.email, Validators.pattern('[^@]*@[^@]*')]]
    });
  }
  OnChanges() {

  }
calculatePayment() {
  this.totalAmount = (this.paymentForm.value.amount * 0.0375) + this.paymentForm.value.amount;
}
}

在我的html表单中，我有一组带有姓名地址等的输入字段。我想从我的输入字段“Amount you are pay”中提取值，计算总数并显示在pay按钮中。以下是html部分：

<form>
  <div class="row row-padding padding-content md-padding-content lg-padding-content">
    <div class="col-12"></div>
    <div class="panel panel-info">
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6  panel-heading">
        <div class= "col-xs-12 col-sm-12 col-md-6 col-lg-6"><span><i class="glyphicon glyphicon-lock"></i></span> Secure Payment
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 pull-right"><img class="pull-right cards-img" src="assets/img/credit-cards.png">
        </div>
      </div>
      <div class="panel-body panel-box">
        <div class="form-group">
          <div class="col-sm-12 col-md-12 col-lg-12">
            <strong>Amount You Are Paying</strong>
          </div>
          <div class="col-sm-6 col-md-6 col-lg-6">
            <input type="text" class="form-control" name="pay_amount" id="pay_amount" value="" (input)="calculatePayment()" />
            <span class="afix">***3.75% fee will be added to the amount (see below)</span>
          </div>
        </div>
        <div class="form-group">
          <div class="col-xs-12 col-md-12 col-sm-12 col-xs-12 col-lg-12 pull-right btn-row">
            <button type="submit"  class="btn btn-primary btn-lg btn-submit-fix pull-right">Pay {{totalAmount}}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  </form>

安全支付
您正在支付的金额
***金额中将增加3.75%的费用（见下文）
支付{{totalAmount}

安全支付
您正在支付的金额
***金额中将增加3.75%的费用（见下文）
支付{{totalAmount}
@组成部分({
选择器：'应用程序付款'，
templateUrl:“./payment.component.html”，
样式URL:['./payment.component.css']
})
导出类PaymentComponent实现OnInit{
付款方式：FormGroup；
总数：个数；
构造函数（私有formBuilder:formBuilder）{}
恩戈尼尼特（）{
this.paymentForm=this.formBuilder.group({
“tenName”：[''，验证程序。必需]，
“appAddress”：[''，验证器。必需]，
'textArea'：[''，验证器。必需]，
'电话号码'：[''，[Validators.required，Validators.maxLength（11）]，
“payAmt”：[''，验证器。必需]，
'emailAddress'：[''[Validators.required，Validators.email，Validators.pattern（'[^@]*@[^@]*'）]]
});
}
OnChanges（）{
}
计算支付（）{
this.totalAmount=+this.paymentForm.value.paymount+（+this.paymentForm.value.paymount*0.0375）；
}
}

    <form>
      <div class="row row-padding padding-content md-padding-content lg-padding-content" [formGroup]="paymentForm">
        <div class="col-12"></div>
        <div class="panel panel-info">
          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6  panel-heading">
            <div class= "col-xs-12 col-sm-12 col-md-6 col-lg-6"><span><i class="glyphicon glyphicon-lock"></i></span> Secure Payment
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 pull-right"><img class="pull-right cards-img" src="assets/img/credit-cards.png">
            </div>
          </div>
          <div class="panel-body panel-box">
            <div class="form-group">
              <div class="col-sm-12 col-md-12 col-lg-12">
                <strong>Amount You Are Paying</strong>
              </div>
              <div class="col-sm-6 col-md-6 col-lg-6">
                <input type="text" class="form-control"  formControlName="payAmt" (input)=calculatePayment()/>
                <span class="afix">***3.75% fee will be added to the amount (see below)</span>
              </div>
            </div>
            <div class="form-group">
              <div class="col-xs-12 col-md-12 col-sm-12 col-xs-12 col-lg-12 pull-right btn-row">
                <button type="submit"  class="btn btn-primary btn-lg btn-submit-fix pull-right">Pay {{totalAmount}}</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      </form>

    @Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements OnInit {
    paymentForm: FormGroup;
      totalAmount: number;

      constructor(private formBuilder: FormBuilder) { }

      ngOnInit() {
        this.paymentForm = this.formBuilder.group({
          'tenName': ['', Validators.required],
          'appAddress': ['', Validators.required],
          'textArea': ['', Validators.required],
          'phoneNumber': ['', [Validators.required, Validators.maxLength(11)]],
          'payAmt': ['', Validators.required],
          'emailAddress': ['', [Validators.required, Validators.email, Validators.pattern('[^@]*@[^@]*')]]
        });
      }
      OnChanges() {

      }

      calculatePayment() {
        this.totalAmount = +this.paymentForm.value.payAmt + (+this.paymentForm.value.payAmt * 0.0375);
      }
}