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>

'''组件.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);
      }
    )
  }

}

标签： angularangular8angular9webapi

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

问题描述

解决方案

推荐阅读