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

Question

当我提交表单时，我使用模板驱动的方法创建了一个表单，它给出了一个错误，即表单中有五个字段，所有表单字段都未定义，我使用重置表单功能清除表单中的所有字段我是 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);
      }
    )
  }

}

Answer 1

CheckThis

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

Public formData : any;

Answer 2

在这里尝试使用 ngModel， ，就像您在 cardOwnerName 等其他输入中使用的一样。

Answer 3

您可能将 formData 设为“未定义”，请尝试插入“？”作为 [value]="this.service?.formData?.PmId"。