如何向 ngForm 提交值？

Question

我在 Angular material 中有一个带有一些输入字段的 ngForm。我想将新字段 total 提交给不是输入字段的 ngForm，因此它应该是一个只读字段，它的值应该来自此 [=20 所在组件的 ts 文件=] 文件已链接。我该怎么做？目前，在 ts 文件中我已经有了 total 属性以及应该在 ngForm 中提交的值，但我不知道如何提交它。我需要将总数设置到名称为 total 的 ngForm 中，其方式与例如将名称为 expiration 的过期设置到 ngForm 中的方式相同。

以下是我目前的 html 文件：

<form #paymentForm="ngForm">

 <div class="form-group">
    <label for="ownerName"><strong>Name* </strong></label>
    <input type="text" ngModel name="ownerName" class="form-control" id="ownerName" placeholder="Name" required>
 </div>


  <div class="form-group">
    <label for="ownerLastName"><strong>Last name* </strong></label>
    <input type="text" ngModel name="ownerLastName" class="form-control" id="ownerLastName" placeholder="Last name" required>
 </div>


  <div class="form-group">
     <label for="cardNumber"><strong>Card number* </strong></label>
     <input type="text" ngModel name="cardNumber" class="form-control" id="cardNumber" placeholder="Card number" required>
  </div>

  <div class="form-group">
     <label for="cvv"><strong>Cvv* </strong></label>
     <input type="text" ngModel name="cvv" class="form-control" id="cvv" placeholder="Cvv" required>
  </div>


  <div class="form-group">
    <label for="expiration"><strong>Expiration* </strong></label>
    <input type="date" ngModel name="expiration" class="form-control" id="expiration" placeholder="Expiration" required>
 </div>


  <div class="modal-footer">
     <button [disabled]="paymentForm.invalid" type="submit" class="btn btn-primary" (click)="createPayment('Successful', 'ok', paymentForm)" routerLink="/orders"  routerLinkActive="active">Pay</button>
  </div>
  </form>

<router-outlet></router-outlet>

Answer 1

您可以从表单值创建一个新对象并添加您想要的任何其他字段

onSubmit(myForm: NgForm) {
   const formAndTotal = {
     ...myForm.value,
     total: this.myTotal,
   }
   //do stuff with formAndTotal
  }

如何向 ngForm 提交值？

How to submit a value to ngForm?

html

angular-material

angular