Problems with AngularJS Promises [closed]

Question

Problems with AngularJS Promises [closed]

Navigation

#1 by (0 votes)

1

I have the following function in AngularJS :

$scope.adicionarContato = function(contato) {
    contato.data = new Date();
    $http.post("http://localhost:3412/contatos", 
               contato).then(function successCallback(response) {
         delete $scope.contato;
         $scope.controlForm.$setPristine();
    }); 
};

I also have a form where you can populate and add data via the JS angle:

<form name="controlForm">
    <input class="form-control" type="text" ng-model="contato.nome" name="nome" placeholder="Nome" ng-required="true" ng-minlength="10" />
    <input class="form-control" type="text" ng-model="contato.telefone" name="telefone" placeholder="Telefone" ng-required="true" ng-pattern="/^\d{4,5}-\d{4}$/" />
    <select class="form-control" ng-model="contato.operadora" ng-options="operadora.nome + ' ( ' + (operadora.preco | currency) + ' ) ' for operadora in operadoras | orderBy:'nome'">
        <option value="">Selecione uma Operadora</option>
    </select>
</form>

The method call is made by the button below:

<button class="btn btn-primary btn-block" ng-click="adicionarContato(contato)" ng-disabled="controlForm.$invalid">      Adicionar Contato
</button>

<button class="btn btn-danger btn-block" ng-click="apagarContatos(contatos)" ng-if="isContatoSelecionado(contatos)">Apagar Contato</button>

When I try to add a new contact by sending the data to the URL specified in the post method, the passed value, which refers to the contents of the "contact" variable, is null. I checked that the webservice that is in the URL " link " loads normally, but the data is not transferred.

I tried to send it this way too

$scope.adicionarContato = function(contato) {
    contato.data = new Date();
    $http.post("http://localhost:3412/contatos", contato1).then(function(response) {
        delete $scope.contato;
        $scope.controlForm.$setPristine();
    }); 
};

without the successCallback method, but continues as null.

Follow the controller:

angular.module("ListaTelefonica").controller("ListaTelefonicaCtrl", function ($scope, $http) {
    $scope.app = "Lista Telefonica";

    var carregarContatos = function() {
         $http.get('http://localhost:3412/contatos').then(function (response) {
              $scope.contatos = response.data;
        }).catch(function(response, status){
              $scope.message = "Erro: " + response.data;
        }); 
    }

    var carregarOperadoras = function() {
        $http.get('http://localhost:3412/operadoras').then(function (response) {
            $scope.operadoras = response.data;
        }); 
    }

    $scope.adicionarContato = function(contato) {
        contato.data = new Date();
        var config = {
              headers : {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
              }
        }
        $http.post("https://requestb.in/ped43xpe", contato, config).then(function successCallback(response) {
            console.log(contato);
            delete $scope.contato;
            $scope.controlForm.$setPristine();
        }); 
    };

    $scope.apagarContatos = function(contatos) {
        $scope.contatos = contatos.filter(function(contato) {
            if(!contato.selecionado) return contato;
        });
    };

    $scope.isContatoSelecionado = function (contatos) {
        return contatos.some(function (contato) {
            return contato.selecionado;
        });
    }

    $scope.ordernarPor = function (campo) {
        $scope.criterioDeOrdenacao = campo;
        $scope.direcaoDaOrdenacao = !$scope.direcaoDaOrdenacao;
    }

    carregarContatos();
    carregarOperadoras();
});

On the console, this message appears:

TypeError: Cannot read property 'some' of undefined
at b.$scope.isContatoSelecionado (index_diretivas.html:78)
at fn (eval at compile (angular.js:15584), <anonymous>:4:259)
at m.$digest (angular.js:18276)
at m.$apply (angular.js:18553)
at angular.js:1942
at Object.invoke (angular.js:5079)
at c (angular.js:1940)
at Wc (angular.js:1960)
at we (angular.js:1845)
at angular.js:34115

Can you explain what is happening?

Update

Follow the controller:

    angular.module("ListaTelefonica").controller("ListaTelefonicaCtrl", function ($scope, $http) {
        $scope.app = "Lista Telefonica";
        // $scope.contatos = [];
        // $scope.operadoras = [];

        var carregarContatos = function() {
             $http.get('http://localhost:3412/contatos').then(function (response) {
                  $scope.contatos = response.data;
            }).catch(function(response, status){
                  $scope.message = "Erro: " + response.data;
            }); 
        }

        var carregarOperadoras = function() {
            $http.get('http://localhost:3412/operadoras').then(function (response) {
                $scope.operadoras = response.data;
            }); 
        }

        $scope.adicionarContato = function(contato) {
            contato.data = new Date();
            var config = {
                  headers : {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                  }
            }
            $http.post("https://requestb.in/ped43xpe", contato, config).then(function successCallback(response) {
                console.log(contato);
                delete $scope.contato;
                $scope.controlForm.$setPristine();
            }); 
        };

        $scope.apagarContatos = function(contatos) {
            $scope.contatos = contatos.filter(function(contato) {
                if(!contato.selecionado) return contato;
            });
        };

        $scope.isContatoSelecionado = function (contatos) {
            return contatos.some(function (contato) {
                return contato.selecionado;
            });
        }

        $scope.ordernarPor = function (campo) {
            $scope.criterioDeOrdenacao = campo;
            $scope.direcaoDaOrdenacao = !$scope.direcaoDaOrdenacao;
        }

        carregarContatos();
        carregarOperadoras();
    });

On the console, this message appears:

TypeError: Cannot read property 'some' of undefined
at b.$scope.isContatoSelecionado (index_diretivas.html:78)
at fn (eval at compile (angular.js:15584), <anonymous>:4:259)
at m.$digest (angular.js:18276)
at m.$apply (angular.js:18553)
at angular.js:1942
at Object.invoke (angular.js:5079)
at c (angular.js:1940)
at Wc (angular.js:1960)
at we (angular.js:1845)
at angular.js:34115

Here is the body part of the page where the controller is implemented:

<body ng-controller="ListaTelefonicaCtrl">
    <div class="jumbotron">

        <h3>{{app}}</h3>
        {{message}}
        <input class="form-control" type="text" ng-model="criterioDeBusca" placeholder="O que você estã procurando" />
        <table class="table">
            <tr>
                <th></th>
                <th><a href="" ng-click="ordernarPor('nome')"> Nome </a></th>
                <th><a href="" ng-click="ordernarPor('telefone')"> Telefone </a></th>
                <th>Operadora</th>
                <th>Data</th>
            </tr>
            <tr ng-class="{'selecionado negrito': contato.selecionado}" ng-repeat="contato in contatos | filter:criterioDeBusca | orderBy:criterioDeOrdenacao:direcaoDaOrdenacao">
                <td><input type="checkbox" ng-model="contato.selecionado" /></td>
                <td>{{contato.nome}}</td>
                <td>{{contato.telefone}}</td>
                <td>{{contato.operadora.nome | lowercase}}</td>
                <td>{{contato.data | date: 'dd/MM/yyyy HH:mm'}}</td>
                <td><div style="width: 20px; height: 20px;" ng-style="{'background-color': contato.cor}"></div></td>
            </tr>
        </table>
        <hr />

        <form name="controlForm">
            <input class="form-control" type="text" ng-model="contato.nome" name="nome" placeholder="Nome" ng-required="true" ng-minlength="10" />
            <input class="form-control" type="text" ng-model="contato.telefone" name="telefone" placeholder="Telefone" ng-required="true" ng-pattern="/^\d{4,5}-\d{4}$/" />
            <select class="form-control" ng-model="contato.operadora" ng-options="operadora.nome + ' ( ' + (operadora.preco | currency) + ' ) ' for operadora in operadoras | orderBy:'nome'">
                <option value="">Selecione uma Operadora</option>
            </select>
        </form>

        <button class="btn btn-primary btn-block" ng-click="adicionarContato(contato)" ng-disabled="controlForm.$invalid">Adicionar Contato</button>
        <button class="btn btn-danger btn-block" ng-click="apagarContatos(contatos)" ng-if="isContatoSelecionado(contatos)">Apagar Contato</button>
        <br />
        <!--{{7.4578 | number:9}}-->
        <br />
        <div ng-messages="controlForm.nome.$error" class="alert alert-danger">
            <div ng-message="required">
                Por favor, digite o nome.
            </div>

            <div ng-message="minlength">
                O tamanho mínimo do campo é de 10 caracteres.
            </div>

        </div>

        <div ng-messages="controlForm.telefone.$error" class="alert alert-danger">
            <div ng-message="required">
                Por favor, digite o telefone.
            </div>

            <div ng-message="pattern">
                O formato do telefone deve ser DDDDD-DDDD.
            </div>

        </div>

        <!-- <div ng-include="'footer.html'"></div> -->
        <div style="text-align: center;">
            Criado por Thiago Casotti
        </div>
    </div>
</body>

javascript angularjs

asked by anonymous 29.11.2017 / 22:27

1 answer

Many-to-Many Relationship Road Txt block with Regex

score 0 · Answer 1

Headers

var config = {
  headers : {
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
  }
}

See working

Here in SOpt does not work the snippet , but you can see it working at jsbin.com and view the data being received at requestbin

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http) {
  $scope.operadoras = [
    {
      nome: 'VIVO',
      preco: 1.5
    },
    {
      nome: 'CLARO',
      preco: 1.5
    },
    {
      nome: 'OI',
      preco: 1.5
    }
  ];
  $scope.adicionarContato = function(contato) {
    contato.data = new Date();
    var config = {
      headers : {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
      }
    }
    $http.post("https://requestb.in/ped43xpe", contato, config).then(function successCallback(response) {
      console.log(contato);
      delete $scope.contato;
      $scope.controlForm.$setPristine();
    }); 
  };
});

<div ng-app="myApp" ng-controller="formCtrl">
<form name="controlForm">
    <input class="form-control" type="text" ng-model="contato.nome" name="nome" placeholder="Nome" ng-required="true" ng-minlength="10" />
    <input class="form-control" type="text" ng-model="contato.telefone" name="telefone" placeholder="Telefone" ng-required="true" ng-pattern="/^\d{4,5}-\d{4}$/" />
    <select class="form-control" ng-model="contato.operadora" ng-options="operadora.nome + ' ( ' + (operadora.preco | currency) + ' ) ' for operadora in operadoras | orderBy:'nome'">
        <option value="">Selecione uma Operadora</option>
    </select>
</form>
  <button class="btn btn-primary btn-block" ng-click="adicionarContato(contato)" ng-disabled="controlForm.$invalid">Adicionar Contato</button>
</div>
  
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>

Reference

$ http.post