'How to submit a value to ngForm?

I have an ngForm in Angular material with some input fields. I'd like to submit the new field total to the ngForm that isn't an input field, so it should be a readonly field and its value should come from the ts file of the component to which this html file is linked. How can I do it? At the moment, in the ts file I already have the total property with the value that should be submitted in the ngForm, but I don't know how to submit it. I need that the total is set, into the ngForm, with name total , in the same way as, for example, the expiration is set with name expiration into the ngForm.

The following is my html file at the moment:

<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>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source