Ошибка угловой переменной не определена с использованием проверки, управляемой шаблоном

Я создаю форму, используя подход, основанный на шаблонах, когда я отправляю форму, она дает ошибку, что все поля формы не определены в форме, есть пять полей, и я использую функцию сброса формы, чтобы очистить все поля в форме Я новичок в angular я не знаю, как исправить эту ошибку

Ошибка

core.js:4197 ERROR TypeError: Cannot read property 'PmId' of undefined
    at PaymentDetailComponent_Template (payment-detail.component.html:3)
    at executeTemplate (core.js:7447)
    at refreshView (core.js:7316)
    at refreshComponent (core.js:8454)
    at refreshChildComponents (core.js:7109)
    at refreshView (core.js:7366)
    at refreshComponent (core.js:8454)
    at refreshChildComponents (core.js:7109)
    at refreshView (core.js:7366)
    at refreshComponent (core.js:8454)

'' 'HTML-форма' ''

<form  #form="ngForm" autocomplete="off" (ngSubmit)="onSubmit(form)">

  <input type="hidden" name="PmId"  [value]="this.service.formData.PmId">

  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text bg-white">
          <i class="fas fa-user"></i>
        </div>
      </div>
      <input  name="CardOwnerName" placeholder="CardOwnerName" #CardOwnerName="ngModel" [(ngModel)]="this.service.formData.CardOwnerName" class="form-control" ngModel required>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text bg-white">
          <i class="far fa-credit-card"></i>
        </div>
      </div>
      <input  name="CardNumber" placeholder="CardName" #CardNumber="ngModel" [(ngModel)]="this.service.formData.CardNumber" class="form-control" ngModel required >
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text bg-white">
          <i class="fas fa-calendar-week"></i>
        </div>
      </div>
      <input  name="ExpirationDate" placeholder="MM\YY" #ExpirationDate="ngModel" [(ngModel)]="this.service.formData.ExpirationDate" class="form-control" ngModel required >
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text bg-white">
          <i class="fas fa-key"></i>
        </div>
      </div>
      <input  type="password" placeholder="CVV" name="CVV" #CVV="ngModel" [(ngModel)]="this.service.formData.CVV" class="form-control" ngModel required >
    </div>
  </div>

  <div class="form-group">
    <button type="submit"  class="btn btn-success btn-lg btn-block"  [disabled]="form.invalid"> <i class="fas fa-database"></i> Submit </button>
  </div>

</form>

'' 'Component.ts' ''

import { Component, OnInit } from '@angular/core';
import { PaymentDetailService } from 'src/app/shared/payment-detail.service';
import { NgForm, NgModel } from '@angular/forms';

@Component({
  selector: 'app-payment-detail',
  templateUrl: './payment-detail.component.html',
  styles: [
  ]
})

export class PaymentDetailComponent implements OnInit {

  constructor(public service: PaymentDetailService)
  {

  }

  ngOnInit(): void
  {
    this.resetForm();
  }


  resetForm(form?:NgForm)
  {
    if(form != null)
    {
      form.resetForm();

      this.service.formData =
      {
        PmId : 0,
        CardOwnerName : '',
        CardNumber : '',
        ExpirationDate : '',
        CVV : '',
      }
    }
  }

  onSubmit(form:NgForm)
  {
    this.service.PostPaymentDetails(form.value).subscribe
    (
      res =>
      {
        this.resetForm(form);
      },
      err =>
      {
        console.log(err);
      }
    )
  }

}