How to pass input value with POST method using Angular

Asked

Viewed 1,588 times

2

I’m trying to pass certain values of a input through the POST method using Angular, but I’m not able to pass these values in the URL and not even pick them up on the server. Could someone help me solve this problem?

Detail, for each button I click I have to pass the two values of the input + value of the button clicked (operation).

Form

<form id="form" ng-controller="Controller">
  <input id="val1" name="val1" ng-model="val1" placeholder="Valor 1" type="text">
  <input id="val2" name="val2" ng-model="val2" placeholder="Valor 2" type="text">
  <input id="operacao" name="operacao" type="hidden" value="0">
  <input id="soma" type="button" value="soma" ng-click="doClick(val1, val2)">
  <input id="sub" type="button" value="sub">
  <input id="mult" type="button" value="mult">
  <input id="divs" type="button" value="divs">
  <input id="resultado" type="text"><br>
</form>

Controller

.controller("Controller", function($scope, operacaoService) { $scope.model = {};
  $scope.doClick = function(operacao) {
    $scope.model.operacao = operacao;
    operacaoService.postOperacao($scope.model).success(function(data, status) {
      $scope.valores = data.result;
      console.log(data.result);
    }).error(function(data, status) {
      console.log("erro", status);
    });
  };
})

Service

module.factory('operacaoService', function($http) {

  var postOperacao = function(model) {

    return $http({
      url: "/operacoes",
      method: "post",
      params: model
    });
  };

  return {
    postOperacao: postOperacao
  };
});


Server (Node.js)

app.post('/operacoes', function(req, res) {

  var valores = req.query;
  var val1 = parseInt(valores.val1);
  var val2 = parseInt(valores.val2);
  var operacao = (valores.operacao);
  var result;

  if (operacao === "soma") {
    result = val1 + val2;
    res.send({
      result: result,
      val1: val1,
      val2: val2,
      operacao: operacao
    });

  }

2 answers

3

Try to simplify your method $http

$http.post(url, data, config); //Você não está usando configurações extras, então não use o 3º parâmetro
$http.post('/operacoes', model);

If it still doesn’t work, add a feedback to see what’s going on. It may be a problem on the server.

$http.post('/operacoes',model).then( 
    function(res) {console.log(res)}
);

This will display the return on the console.

1


On the ng-click call you are passing val1, val2 and in the function receives operation
You could send :

 <input id="soma" type="button" value="soma" ng-click="doClick(val1, val2, operacao)">

Thus passing the 3 parameters you want and picking up on the inside of the function. The way you did took only the operation.
Or else:

<input id="val1" name="val1" ng-model="model.val1" placeholder="Valor 1" type="text">
<input id="val2" name="val2" ng-model="model.val2" placeholder="Valor 2" type="text">
<input id="operacao" name="operacao" ng-model="model.operacao" type="hidden" value="0">
<input id="soma" type="button" value="soma" ng-click="doClick(model)">

and in the function would already pass the direct model. I did not test the rest of your code, but saw that the values were not being passed. From a.log console within the function to check that information is passing correctly

Browser other questions tagged

You are not signed in. Login or sign up in order to post.