Ng Компонент withTypeError: Невозможно прочитать свойство 'post' из неопределенного

Question

Я построил два компонента: регистрация и форма регистрации .

.

После заполнения формы и нажатия кнопки «Отправить» я получаю:

Я просмотрел все вопросы с похожей проблемой, и ни один из них не помог мне исправить блокиратор.

Registration.component.html имеет компонент формы регистрации:

(...)
<app-signup-form></app-signup-form>
(...)

Регистрация-form.component.html

<code><form [formGroup]="mysignup">
  <div class="form-group">
    Name:<br>
    <input type="text" formControlName="name" ngModel="name"  required/>
  </div>
  <div class="form-group">
    Email:<br>
    <input type="email" formControlName="email" ngModel="email"  required/>
  </div>
  <div class="form-group">
      Password:<br>
      <input type="password" formControlName="password" ngModel="password" required/>
  </div>
  <div class="form-group">
      <input type="button" value="Submit" class="btn btn-primary" (click)="signupUser()" />
  </div>
  <br><br>
  <pre>{{mysignup.value | json}}

Signup-form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms'; // Linking the form model to the form template
import { HttpClient, HttpResponse } from '@angular/common/http';

@Component({
  selector: 'app-signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.scss']
})
export class SignupFormComponent implements OnInit {
  mysignup: FormGroup;
  constructor() {}
  ngOnInit() {
    this.mysignup = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required)
  });
  }
  signupUser($scope, $http) {
    this.mysignup = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required)
  });
  // tslint:disable-next-line:no-debugger
  // debugger;
    $http.post('test.php', {
      'name': $scope.name,
      'email': $scope.email,
      'password': $scope.mysignup.password
    }).then(function(Response) {
      console.log('Data inserted successfully');
    }, function(error) {
      alert('Sorry! Data couldnt be inserted!');
      console.error(error);
    });
  }
}

Я просто хочу, чтобы данные поступили test.php, потому что оттуда я знаю, как обращаться с этим.

Как это исправить?

Answer 1

В вашем коде нет http. Измените свой конструктор на это:

Во-первых, импорт http, как это: import { HttpClient } from "@angular/common/http";

Затем объявите локальную переменную с именем http в своем конструкторе следующим образом:

constructor(private http: HttpClient) { }                    

Также , это стандартная практика использовать http вместо $http.

И НЕ передайте $http и $scope на signupUser function. В signupUser function получите доступ к значениям формы следующим образом: this.formGroupName.controls['formControlName'].value (в вашем случае this.mysignup.controls['name'].value).

Затем вы можете вызвать signupUser из html, например:

 <button (click)="signupUser()">Sign UP<button>                        

Вам придется изменить свой post вызов следующим образом (ПРИМЕЧАНИЕ: http.post возвращает Observable , поэтому вам придется подписаться на него следующим образом):

this.http.post('test.php', {
  'name': this.mysignup.controls['name'].value,
  'email': this.mysignup.controls['email'].value,
  'password': this.mysignup.controls['password'].value
}).subscribe(function(Response) {
  console.log('Data inserted successfully');
}, function(error) {
  alert('Sorry! Data couldnt be inserted!');
  console.error(error);
});                         

Обратите внимание: Желательно записывать все связанные с HttpClient (get, post и т. Д.) Коды отдельно в служебном файле.

Answer 2

Похоже, вы слишком много в старых паттернах Angular 1.x. Ошибка возникает из строки с $http.post, потому что вы внедрили службу $ http в методе signupUser. Вам нужно будет вставить его в конструктор класса вашего компонента

constructor(protected $http: HttpClient) {}

и затем получить доступ к нему в методах класса с помощью

this.$http.post(...)

Не забудьте импортировать CommonModule в @Module, объявляющий этот компонент.

Подробнее о внедрении зависимостей в Angular docs: https://angular.io/guide/dependency-injection-pattern

Также рассмотрите возможность переосмысления именования переменных, потому что знак $ не используется для этого случая в Angular 2+ и не использует $scope, но привязки данных.