时间戳

首页 > 解决方案 > Angular 表单返回错误类型错误：“_co.service.formData 未定义”？

javascript - Angular 表单返回错误类型错误：“_co.service.formData 未定义”？

问题描述

我正在尝试在 Angular 7 中制作一个表格并进入其中，但该表格给出以下错误：错误类型错误：“_co.service.formData 未定义”

现在这是我的组件 html 部分的代码：-

<form (sumbit)="signUp(form)" autocomplete="off" #form="ngForm">
  <div class="form-group">
     <input name="Name" class="form-control" #Name="ngModel"  [(ngModel)]="service.formData.Name"  required>
  </div>
</form>

虽然这是类型脚本代码

import { Component, OnInit } from '@angular/core';
import {UserService} from '../../shared/user.service';
import {NgForm} from '@angular/forms';
@Component({
  selector: 'app-agent-signup',
  templateUrl: './agent-signup.component.html',
  styleUrls: ['./agent-signup.component.css']
})
export class AgentSignupComponent implements OnInit {

  constructor(private service:UserService) { }

  ngOnInit() {
  }
  signUp(form:NgForm)
  {

  }
}

这是 user.service 的代码：-

import { Injectable } from '@angular/core';
import {UserData} from './user.model';
import {HttpClient} from '@angular/common/http';
import {environment} from '../../environments/environment';
 const API_URL=environment.apiUrl;
@Injectable({
  providedIn: 'root'
})
export class UserService {
  formData : UserData;
  constructor(private http:HttpClient) {}

  createUser(formData:UserData)
  {
     return this.http.post(API_URL+'/user/signup',formData);
  }
}

这是 user.model 类：-

export class UserData{

  public Email:string;
  public Password:string;
  public  Rera_no:string;
  public Name:string;
  public Company_name:string;
}

我收到以下错误：- ERROR TypeError: "_co.service.formData is undefined" 谁能告诉我哪里出错了，我该如何纠正？

标签： javascriptangulartypescriptangular7

解决方案

您正在使用 Class 对象进行初始化，但没有创建它的对象。所以在你的组件中做这样的改变

从

表单数据：用户数据；

至

formData = new UserData();

在您的模板中

<form (sumbit)="signUp(form)" autocomplete="off" #form="ngForm">
  <div class="form-group">
     <input name="Name" class="form-control" #Name="ngModel"  [(ngModel)]="service.formData?.Name"  required>
  </div>
</form>

我希望这能解决你的问题

编辑

ngModel您正在使用尚未在服务中创建的对象变量。所以尝试先用空字符串初始化它。

export class UserData{

  public Email:string;
  public Password:string;
  public  Rera_no:string;
  public Name: string = '';
  public Company_name:string;
}

推荐阅读