title: Get form data in HTTP call using angular
body: <pre><code>This is how the authentication is supposed to be.
  </code></pre>
  
  <p>POST <a href="https://DomainName/api/v1/authentication?username=" rel="nofollow noreferrer">https://DomainName/api/v1/authentication?username=</a>{username}&amp;password={password}..
  this is the typescript authentication call code</p>
  
  <pre><code>authenticate(url, payload){
  let username: string = 'admin';
  let password: string = 'password';
  let headers: Headers = new Headers();
    headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
    headers.append("Content-Type", "application/json");
    headers.append("Access-Control-Allow-Origin", "*");
  return this.http.post(server + url + addon, payload, { headers:headers });
  </code></pre>
  
  <p>this is the code for the form data</p>
  
  <pre><code>    // Getting data info from signing form
  loginForm = new FormGroup({
  username: new FormControl(null, ([Validators.required, Validators.minLength(5)])),
  password: new FormControl(null, ([Validators.required, Validators.minLength(5)])),
  })
  </code></pre>
  
  <p>the user data</p>
  
  <pre><code>// user data 
  loginData={
  username:'',
      password:'',
  }
  
  buildLoginData(){
      this.loginData.password = this.loginForm.controls['password'].value;
  this.loginData.username = this.loginForm.controls['username'].value;
  }
  </code></pre>
  
  <p>the sign in function</p>
  
  <pre><code>    signin(){
      this.loading =this.loadingCtrl.create({
    content:"Verifying Credentials ..."
  });
  this.loading.present();
      this.buildLoginData();
      console.log(this.loginData);
    this.http.store('authentication', this.loginData).subscribe((response)=&gt;{
              // console.log(response);
              // console.log("*******************************************");
              // console.log(response['username']);
              localStorage.setItem('office_ID',response['officeId']);
              localStorage.setItem('user_ID', response['userId']);
              localStorage.setItem('username', response['username']);
              this.loading.dismissAll();
              this.navCtrl.push(HomePage);
    },error=&gt;{
              this.loading.dismissAll();
                  if(error.status === 401){
                      this.toastr.messenger('Wrong Username or Password');
                  }else
      this.toastr.messenger('Login Failed!');
              console.log(JSON.stringify(error));
              alert("Error : " + error );
  });    
  }
  </code></pre>
  
  <p>Response log data</p>
  
  <pre><code>{"_body":"{\"developerMessage\":\"Invalid authentication details were 
  passed in api request.\",\"httpStatusCode\":\"401\",\"defaultUserMessage 
  \":\"Unauthenticated. Please login.\",\"userMessageGlobalisationCode
  \":\"error.msg.not.authenticated\",\"errors
  \":[]}","status":401,"ok":false,"statusText":"Unauthorized","headers":
  {"Content-Type":["application/json"]},"type":2,"url":"https//x.x.x.x:xxxx            
  /xxxxxxxxx/api/v1/authentication?tenantIdentifier=default"} 
  </code></pre>
  
  <p>the error</p>
  
  <pre><code> "Unauthorized" and this is because the form values are not being sent to                                                                                     
    the api as headers.
  </code></pre>
  
  <p>Any help is much Appreciated. Thanks.</p>