Question

我已经建立了两个组件： signup 和 signup-form 。

。

填写表格并单击“提交”按钮后，我得到：

我已经搜索了所有具有类似问题的问题，但是没有一个问题能帮助我解决阻止程序。

Signup.component.html 具有注册表单组件：

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

Signup-form.component.html ：

<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}}</pre>
</form>

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

然后，您可以像这样从html调用signupUser：

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

您必须像这样更改您的post调用（注意：http.post返回可观察，因此您必须这样订阅）：< / p>

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行，因为您在$ signupUser方法中注入了$ http服务。您需要将其注入到组件类的构造函数中

constructor(protected $http: HttpClient) {}

，然后使用

在类的方法中进行访问

this.$http.post(...)

不要忘记在声明该组件的@Module中导入 CommonModule 。

有关Angular文档中依赖项注入的更多信息：some digging

还考虑考虑一下变量的命名，因为在Angular 2+中，$符号不用于这种情况，并且不使用$scope，而是数据绑定。

Ng Component withTypeError：无法读取未定义的属性“ post”

2 个答案: