How to submit a value to ngForm?-CodePudding

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 >
    <label for="ownerName"><strong>Name* </strong></label>
    <input type="text" ngModel name="ownerName"  id="ownerName" placeholder="Name" required>
 </div>


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


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

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


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


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

<router-outlet></router-outlet>

CodePudding user response：

You can create a new object from the form value and add whatever other fields you want

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