title: sending input field data to php script in angular 4
body: <p>I am trying to build an angular app and i am fairly new to the technology. I have successfully been able to take values from the input field and view them in the console but i want to take those values and send it to the php script where the backend processing can be done. Basically its a simple mail function. Below are my codes.</p>
  
  <p>My backend.php file</p>
  
  <pre><code>&lt;?php
  $postdata = file_get_contents("php://input");
  $request = json_decode($postdata);
  
    @$rand = $_POST['rand'];
      @$captcha = $_POST['captcha'];
      @$email = $_POST['email'];
      @$msg = $_POST['msg'];
      @$to = "contact@ixoraa.in";
    @$subject = $_POST['name'];   
      @$headers = "From:" . $email . "\r\n";
    @$header .= "MIME-Version: 1.0\r\n";
      @$header .= "Content-type: text/html\r\n";
  if($rand == $captcha)
  {
  
      $retval =mail($to, $subject, $msg, $headers);
  
  
  
  if( $retval == true )  
  
  {
  
  echo '&lt;script type="text/javascript"&gt;'; 
  
  echo 'alert("Thanks for your feedback. We will reply back soon.")'; 
  echo '&lt;/script&gt;';
  
  echo '&lt;meta http-equiv="refresh" 
  content="0;url=http://www.ixoraa.in/new"&gt;';
  
  }
  
  else
  {
  
  echo '&lt;script type="text/javascript"&gt;'; 
  
  echo 'alert("Not sent !!!")'; 
  
     echo '&lt;/script&gt;';
  }
     }
  
          else{
  
  echo '&lt;script type="text/javascript"&gt;'; 
  
  echo 'alert("Captcha does not match")'; 
  
     echo '&lt;/script&gt;';
          }
  
  
  ?&gt;
  </code></pre>
  
  <p>Here goes my component.html</p>
  
  <pre><code>&lt;form class="" [formGroup] = "form" (ngSubmit)="onSubmit(form.value)"&gt;
              &lt;div class="form-group has-feedback"&gt;
                  &lt;input  name="name" type="text" formControlName='name' class="form-control" placeholder="Name" style="background-color: rgba(60, 144, 155, 0.10); color: white;"/&gt;
                  &lt;i class="glyphicon glyphicon-user form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"&gt;&lt;/i&gt;
             &lt;/div&gt;
             &lt;div class="form-group has-feedback"&gt;
                  &lt;input  name="email" formControlName='email' type="text" class="form-control" placeholder="Email" style="background-color: rgba(60, 144, 155, 0.10); color: white;" /&gt;
                  &lt;i class="glyphicon glyphicon-send form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"&gt;&lt;/i&gt;
             &lt;/div&gt;
             &lt;div class="form-group has-feedback"&gt;
                 &lt;textarea  name="msg" formControlName='msg' type="text" rows="5" class="form-control" placeholder="Message" style="background-color: rgba(60, 144, 155, 0.10); color: white;"&gt;&lt;/textarea&gt;
                  &lt;i class="glyphicon glyphicon-comment form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"&gt;&lt;/i&gt;
             &lt;/div&gt;
     &lt;div style=" display: table; width: 100%; font-weight:600; font-size:25px;"&gt;
     &lt;input name="rand" formControlName='rand'  class="text-center" style="background-color: antiquewhite; text-decoration: line-through;" size="3" type="text" value="{{randomNumber}}" readonly&gt;&lt;/div&gt;
     &lt;div class="form-group has-feedback"&gt;
          &lt;input formControlName='captcha'  onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off name="captcha" id="captcha" type="text" class="form-control" placeholder="Enter Code Here" style="background-color: rgba(60, 144, 155, 0.10); color: white;" /&gt;
          &lt;i class="glyphicon glyphicon-pencil form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"&gt;&lt;/i&gt;
     &lt;/div&gt;
     &lt;input style="padding-left: 20px; font-weight: 600; padding-right: 20px; background-color: #00aee7;margin-bottom: 40px; color: white;" type="submit" name="submit" value="Send" class="btn"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and here goes my component.ts file</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {Http} from '@angular/http';
  import {FormGroup, FormControl, FormControlName} from '@angular/forms';
  
  @Component({
    selector: 'app-footer',
    templateUrl: './footer.component.html',
    styleUrls: ['./footer.component.css']
  })
  export class FooterComponent implements OnInit {
  
    form;
  
    randomNumber;
    constructor(private http: Http) {
      this.randomNumber = Math.floor((Math.random() * 10000) + 1);
  
    }
  
    onSubmit = function(user) {
        console.log(user);
        this.http.post('http://localhost/ixoraa/backend.php', user).subscribe();
  
    };
  
    ngOnInit() {
      this.form = new FormGroup({
        name: new FormControl(),
        email: new FormControl(),
        msg: new FormControl(),
        captcha: new FormControl(),
        rand: new FormControl(this.randomNumber)
      });
    }
  
  }
  </code></pre>
  
  <p>thanks in advance!!!</p>