1
votes

Forme angulaire renvoyant ERROR TypeError: "_co.service.formData is undefined"?

J'essaie de créer un formulaire en angulaire 7 et d'y entrer mais le formulaire donne l'erreur suivante: ERROR TypeError: "_co.service.formData is undefined"

voici maintenant mon code pour le partie html du composant: -

export class UserData{

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

alors que c'est le code de script de type

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

et c'est le code pour user.service: -

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)
  {

  }
}

et voici la classe user.model: -

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

et je suis obtenir l'erreur suivante: - ERREUR TypeError: "_co.service.formData n'est pas défini" quelqu'un peut-il me dire où je me trompe et comment puis-je le corriger?

javascript typescript angular angular7

4 commentaires

où avez-vous défini service.formData.Name ?

@programoholic s'il vous plaît voir le code mis à jour

Pouvez-vous fournir un stackblitz?

@JohanRin stackblitz.com/edit/angular-kwhgmb

3 Réponses :

1
votes

Je pense que c'est parce que vous devez appeler la méthode du service UserService dans le composant avec la forme AgentSignupComponent . Vous devez donc appeler la méthode createUser dans AgentSignupComponent;

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

0 commentaires

2
votes

vous initialisez avec l'objet Class, mais vous ne créez pas son objet. Donc faites des changements comme celui-ci dans votre composant

formData: UserData;

formData = new UserData ();

dans votre modèle

export class UserData{

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

J'espère que cela résoudra votre problème

MODIFIER p >

vous utilisez la variable Object comme ngModel qui n'est pas encore créée dans le service. essayez donc de l'initialiser d'abord avec une chaîne vide.

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

0 commentaires

0
votes

Écrivez un console.log (service); dans votre fonction InOnInit () de votre classe AgentSignupComponent . Observez les propriétés que vous pouvez voir dans votre console. Cette erreur signifie qu'il ne peut pas accéder à l'objet UserData dans votre variable formData. Vous devez donc lancer un objet UserData et attribuer une valeur à la variable. Remplacez formData: UserData; par formData = new UserData ();

0 commentaires