如何将表格从Angular发送到PHP？

Question

I'm trying to send my form from angular 5 to my php file, and re-inject the result back into angular

 /* My typescrit file */

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { trigger , state, style, transition, animate, keyframes } from 
'@angular/animations';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Headers, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, 
MatIconModule, MatCheckboxModule, MatRadioModule, MatSelectModule, 
MatInputModule, MatDialogModule, MatTooltipModule, MatSnackBarModule, 
MatSidenavModule } from '@angular/material';
import { ReactiveFormsModule, FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

constructor(public http: HttpClient) {}

let formdata = document.querySelector('form');

let datajson= {
      action: 'login', 
      username: formdata.username.value, 
      useremail: formdata.useremail.value,
      usersubject: formdata.usersubject.value,
      usermessage: formdata.usermessage.value
    };

let apiurl = '../../assets/php/message.php';

this.http.post(apiurl,datajson)
.subscribe(data => {alert(data.data)})
.catch(error=>{ alert (error.status)});

</pre>

But I'm getting "Http undefined error".

Answer 1

You can achieve this through sending get or post request from angular controller to php page. Sample code should like this(it's from my site):

app.controller('sign_up', function ($scope, $http) {
    /*
    * This method will be called on click event of button.
    * Here we will read the email and password value and call our PHP file.
    */
    $scope.check_credentials = function () {
    document.getElementById("message").textContent = "";
    var request = $http({
        method: "post",
        url: window.location.href + "login.php",
        data: {
            email: $scope.email,
            pass: $scope.password
        },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });

    /* Check whether the HTTP Request is successful or not. */
    request.success(function (data) {
        document.getElementById("message").textContent = "You have login successfully with email "+data;
    });
}

Answer 2

http is undefined because you are trying to use it without defining it in your class.

I'm guessing this file your showing is from your app.module.ts ? If so import the HttpClientModule there.

import { HttpClientModule } from '@angular/common/http';
...
imports: [
// import HttpClientModule after BrowserModule.
HttpClientModule,
],

Go to your app.component.ts and do your request there. Or in any component you want it to be done.

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 datajson= {
      action: 'login', 
      username: formdata.username.value, 
      useremail: formdata.useremail.value,
      usersubject: formdata.usersubject.value,
      usermessage: formdata.usermessage.value
    };
apiurl = '../../assets/php/message.php';


 constructor(private http: HttpClient) {
  this.http.post(apiurl, datajson).subscribe(data => {alert(data.data)}
  .catch(error=> {alert(error)}
 }
}