Question

我正在尝试在angular 7中创建一个表单并进入其中，但是该表单给出以下错误：错误TypeError：“ _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;
}

，并且出现以下错误：- 错误TypeError：“ _ co.service.formData未定义” 谁能告诉我我要去哪里错了，我该如何纠正？

Answer 1

我认为这是因为您需要从服务UserService调用组件为AgentSignupComponent形式的方法。因此，您需要在AgentSignupComponent;

中调用createUser方法

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) { } //You use DI this but dont call method;

  ngOnInit() {
  }
  signUp(form:NgForm) {
    this.service.createUser(form); 
  }
}

Answer 2

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

来自

formData：UserData;

至

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

Answer 3

在您的console.log(service);类的InOnInit()函数中写一个AgentSignupComponent。观察您可以在控制台中看到哪些属性。此错误意味着它无法访问formData变量中的UserData对象。因此，您需要启动一个UserData对象并为该变量分配一个值。将formData : UserData;更改为formData = new UserData();

角形返回错误TypeError：“ _ co.service.formData未定义”？

3 个答案: