Грешка на ъглова променлива, недефинирана при използване на управлявано от шаблон валидиране

Създавам формуляр, като използвам подход, управляван от шаблон, когато изпратя формуляра, той дава грешка, че всички полета на формуляра са недефинирани във формуляра, има пет полета и използвам функцията за нулиране на формуляра, за да изчистя всички полета във формуляра, аз съм начинаещ в ъглов Не знам как да поправя тази грешка

Грешка

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);
      }
    )
  }

}