5

Possuo um cadastro de múltiplos contatos, em que cada contato pode ter um ou vários campos dinâmicos. É possível definir o nome destes campos, e eles são diferentes entre os contatos.

Por exemplo, se o Contato 1 possui o campo campo 1, o Contato 2 não terá esse campo, a não ser que seja adicionado manualmente.

A minha inserção de múltiplos contatos funciona corretamente, após adicionar os campos dinâmicos para um único usuário. A configuração da inserção do campo dinâmico ocorre num modal.

Porém, no momento em que tento inserir um novo campo no segundo contato, e preencho corretamente o modal, obtenho um push is undefined.

inserir a descrição da imagem aqui

HTML

<div ng-repeat="contato in contatos" class="form-group">
      <div class="col-sm-10">
        <h4><b><i>Contato {{$index + 1}}</b></i></h4>
        <label for="nomeContato">Nome:</label>
        <input  type="text" name="nomeContato" id="nomeContato" class="form-control" ng-model="contato.nome">
        <br>
        <div class="control-group">
          <select selectize="single.options" placeholder="Selecionar uma ag&ecirc;ncia" ng-model="contato.agencia" options="listaAgencias"></select>
        </select>
      </div>
      <div ng-repeat="dado in contato.dados">
      <label for="campoValor">{{dado.campo}}</label>
      <input  type="text" name="dadoValor" id="dadoValor" class="form-control" ng-model="dado.valor">
        <button type="button" class="btn btn-xs btn-default" ng-click="excluirCampo">
          <span class="glyphicon glyphicon-remove"></span>
        </button>
    </div>
      <div align="right"><button type="button" class="btn btn-xs btn-primary" ng-click="novoCampo($index)">Inserir novo campo</button></div>
    </div>
  </div>
  <div align="right">
    <button type="button" class="btn btn-xs btn-primary" ng-click="novoContato(contato.nome, contato.agencia, dado)">
      <span class="glyphicon glyphicon-plus"></span>
    </button>
    <button type="button" class="btn btn-xs btn-danger" ng-click="excluirContato()"
    ng-disabled="contatosVazio()">
    <span class="glyphicon glyphicon-minus"></span>
  </button>
</div>

Controller.js

oknok.controller('veiculoController', function ($scope, $q, $timeout, $modal, $log, veiculosAPI, agenciasAPI, contatosAPI) {
  $scope.erroAoSalvar = false;
  $scope.formularioValido = false;
  $scope.salvoComSucesso = false;
  $scope.listaAgencias = [];
  $scope.tipo = "Simples";
  $scope.single = {
    options: {
      valueField: 'nome',
      labelField: 'nome',
      searchField: ['nome']
    }
  };
  $scope.contatos = [{
    nome: "",
    agencia: "",
    dados: []
  }];
  var $mySelect = "";

  agenciasAPI.getAgencias().success(function (data) {
    var embedded = data._embedded;
    $scope.listaAgencias = embedded.agencias;
    $mySelect = $('#select-tools').selectize({
      maxItems: null,
      valueField: 'nome',
      labelField: 'nome',
      searchField: 'nome',
      options: embedded.agencias,
      create: false
    });
  }).catch(function (error) {
    alert("Opsss! Erro ao obter listagem de agencias");
  });

  $scope.novoContato = function (nome, agencia, dados) {
    //Adiciona novo contato
    $scope.contatos.push({
      nome: nome,
      agencia: agencia,
      dados: dados
    });
    agenciasAPI.getAgencias().success(function (data) {
      var embedded = data._embedded;
      $scope.listaAgencias = embedded.agencias;
    }).catch(function (error) {
      alert("Erro ao adicionar novo contato");
    });
  };

  $scope.excluirContato = function () {
    var ultimoItem = $scope.contatos.length - 1;
    $scope.contatos.splice(ultimoItem);
  };

  $scope.contatosVazio = function () {
    if (!($scope.contatos.length <= 1)) {
      return false;
    } else {
      return true;
    }
  };

  $scope.novoCampo = function (index) {
    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: '',
      resolve: {
        index:  function () {
          return index
        }
      }
    });

    modalInstance.result.then(function (result) {
      try{
        //Aqui ocorre undefined
        $scope.contatos[result.index].dados.push({
          campo: result.nomeCampo,
          valor: ""
        });
      }catch(error){
        console.log(error);
      }
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

oknok.controller('ModalInstanceCtrl', function ($scope, $modalInstance, contatosAPI, index){
  $scope.animationsEnabled = true;

  $scope.ok = function () {
    $modalInstance.close({nomeCampo: $scope.nomeCampo, index: index});
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };

});
1
  • Sugiro verificar o typeof de contatos antes de fazer o push, por exemplo: console.log(typeof($scope.contatos)).
    – user3603
    Commented 29/07/2015 às 0:34

1 Resposta 1

2

O problema é que na chamada ao método novoContato(contato.nome, contato.agencia, dado), a variável dado esta vindo undefined ou null, provavelmente. Note que ela esta fora do ng-repeat, e por isto contém um valor inválido.

Quando ela é atribuída então no trecho:

$scope.contatos.push({
  nome: nome,
  agencia: agencia,
  dados: dados
});

...o campo dados ao invés de possuir um array, possui undefined (ou null).

Assim, quando o método push é chamado mais a frente, ele não irá existir na variável e por isso o erro.

Além de ser unidefined, não é necessário passar os valores do nome e da agencia ao novo contato, o angularJS já altera aquele elemento dinâmicamente. É preciso apenas inserir um novo elemento para criar um novo contato:

$scope.novoContato = function () {
        //Adiciona novo contato
        $scope.contatos.push({
            nome: "",
            agencia: "",
            dados: []
        });
        agenciasAPI.getAgencias().success(function (data) {
            var embedded = data._embedded;
            $scope.listaAgencias = embedded.agencias;
        }).catch(function (error) {
            alert("Erro ao adicionar novo contato");
        });
    }; 

Espero ter ajudado.

1
  • 1
    Obrigada! Você não entendeu errado. Não faz nenhum sentido eu passar algo por parâmetro para inserir no array pois eles já são inseridos "dinâmicamente". Commented 29/07/2015 às 11:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .