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

63
5

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

спросил(а) 2021-01-25T18:15:57+03:00 4 месяца, 3 недели назад
1
Решение
63

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

ответил(а) 2021-01-25T18:15:57+03:00 4 месяца, 3 недели назад
63

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

ответил(а) 2021-01-25T18:15:57+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема