Send data through Angular

Question

Hello!

In the form of html I’ll tell you what:

<div class="container jumbotron" ng-controller="crudCtrl">
   <form role="form">
       <div class="form-group">
           <label for="nome">Nome:</label>
           <input type="text" class="form-control" ng-model="nome" id="">
       </div>
       <div class="form-group">
           <label for="sexo">Sexo:</label>
           <input type="text" class="form-control" ng-model="sexo" id="sexo">
       </div>
       <div class="form-group">
           <label for="data">Data Nascimento:</label>
           <input type="text" class="form-control" ng-model="dataNascimento" id="data">
       </div>
       <div class="form-group">
           <label for="pais">País:</label>
           <input type="text" class="form-control" ng-model="pais" id="pais">
       </div>
       <button class="btn btn-default"  ng-click="Cadastrar()">Salvar</button>
   </form>
</div>

And at the following angle:

var app = angular.module("crud", []);
app.controller("crudCtrl", function ($scope) {
    $scope.Cadastrar  = function(data) {
        $scope.MostrarTabela = true;

        $scope.nome = data.nome;
        $scope.sexo = data.sexo;
        $scope.datanasc = data.dataNascimento;
        $scope.pais = data.pais;
    }
});

It’s wrong the way I’m sending the data to the controller?

As it presents the following error:

Cannot read Property 'name' of Undefined

Answer 1

Your input it must be so:

<input type="text" class="form-control" ng-model="cadastro.nome" id="">

With this, inside your controller you will be able to access each property as an array, as follows:

$scope.cadastro.nome;
$scope.cadastro.sexo;
//Etc...

//Ou seguindo pelo seu exemplo
$scope.nome = $scope.cadastro.nome

So you also no longer need to define the object data in function, thus:

$scope.Cadastrar = function() { //Sem o data aqui
    //Função aqui
}

---

The most "correct" method, or at least the most common one (and I prefer to use it) would be to pass the values through ng-Ubmit and access them without having to delimit a $Scope for each field as you did, but it all depends on what use you intend to make of the form. But it would be so:

<form role="form" ng-submit="Cadastrar(cadastro)">
   <div class="form-group">
       <label for="nome">Nome:</label>
       <input type="text" class="form-control" ng-model="cadastro.nome" id="">
   </div>

   // Demais campos aqui

   <button class="btn btn-default" type="submit">Salvar</button>
</form>

Then you can use the controller how you’re using it now.

Answer 2

Yes, it is wrong.

When you declare your function in the controller, you say that you will receive a parameter, in this case data - that’s not wrong.

$scope.Cadastrar  = function(data) { ... }

The problem is in ng-click in your view, you are calling the function Cadastrar, but without passing any parameter.

ng-click="Cadastrar()"

When you try to access the object data in the controller, it is empty, has none of the properties you tried to access.

How to correct?

Simple, first, in the ng-model of inputs create an object, for example pessoa.

<input type="text" class="form-control" ng-model="pessoa.nome">
<input type="text" class="form-control" ng-model="pessoa.sexo">

And in the ng-click pass the expected object.

ng-click="Cadastrar(pessoa)"

This way, you will receive the object in the controller and will not have the error.