Angular 使用模板驱动验证未定义变量错误

Question

I create a form using a template-driven approach when I submit the form it gives an error that all form field is undefined in the form there are five fields and I use reset form function to clear all the fields in the form I am a beginner in angular I don't know how to fix this error

错误

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

}

Answer 1

这里尝试使用ngModel，，正如您在其他输入中使用的，如 cardOwnerName 等

Answer 2

CheckThis

我认为您错过了在 PaymentDetailService 中声明 formData。在访问 formData 之前，您必须在 PaymentDetailService

中声明它

Public formData : any;

Answer 3

您可能正在获取 formData 作为 'undefined'，请尝试插入“?”作为 [value]="this.service?.formData?.PmId".

Angular 使用模板驱动验证未定义变量错误

Angular Variable Error Undefined Using Template Driven Validation

angular

angular8

angular9

webapi