Угловая форма, возвращающая ОШИБКУ TypeError: "_co.service.formData is undefined"?

Question

Я пытаюсь создать форму в angular 7 и войти в нее, но форма выдает следующую ошибку: ERROR TypeError: "_co.service.formData is undefined"

теперь вот мойкод для 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 is undefined" может кто-нибудь сказатьмне, где я иду не так и как я могу это исправить?

Answer 1

вы инициализируете объект 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>

Я надеюсь, что это решит вашу проблему

РЕДАКТИРОВАТЬ

вы используете переменную Object в качестве ngModel, которая еще не создана в Сервисе.поэтому сначала попытайтесь инициализировать его пустой строкой.

export class UserData{

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

Answer 2

Я думаю, это потому, что вам нужно вызвать метод из сервиса UserService в компоненте с формой AgentSignupComponent.Поэтому вам нужно вызвать метод createUser в 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); 
  }
}