Filling form dynamics with Angularjs

Asked

Viewed 1,562 times

1

In the system I’m developing, there will be a field input for the user to search if such CPF already exists registered in the Database, if you have I want to show all the data of this client in an already filled form

This is the function that searches the database and returns the query

$scope.PesquisarCpf = function () {

$http.post("http://GetCpf.php", {'cpf':$scope.cliente.cpf,}).
               success(function(data, status, headers, config){
                 $scope.contratos = data;
               }).error(function(data, status, headers, config){
                 location.href="#/Cliente"

               });
}
html angularjs

  • And what’s the problem? What are you getting? How does what you get diverges from the expected?

  • I get the data from the client of such searched Cpf, for example, </br> ZIP: "0000000" CITY: "xxxxx" </br> COMPLEMENT: "xxxxxx" </br> CPF: "123.456.789-99" </br> DTNASCIMENTO: "xxx" </br> ID_CLIENTE: "1" </br> NAME: "xxxxxx" </br> NOME_MAE: "xxxxxxxx" </br> NOME_PAI: "xxxxxx" <br/> and this data I want to show in an html form

  • 1

    From what I have seen you are returning a string, all separated by <br/>, it would be interesting if you returned a JSON from the server, so you could bind with the ng-model and display each information in an input field. if there is no possibility you could play this string on a field a property and bind with a text field.

2 answers

1

Imagining that you have a user’s Cpf input in your form, and your Function "Pesquisarcpf" returns the user’s data.

<input type="text" 
       ng-model="cpf"
       ng-model-options="{ debounce: 1000 }" // para ter um delay de um segundo para executar a função
       ng-change="PesquisarCpf(cliente.cpf)" />

in your Scope I would only change the parameter passage, for good practice, never pass $Scope in the parameter, as you can notice the ng-change passes the parameter by the function call, you have access to Scope in the html itself.

$scope.PesquisarCpf = function (cpf) {

$http.post("http://GetCpf.php", {"cpf": cpf,}).
               success(function(data, status, headers, config){
                 $scope.contratos = data;
               }).error(function(data, status, headers, config){
                 location.href="#/Cliente"

               });
}

If the example is unclear, I can create a more practical example for you in Plunker.

1

To fill in the value according to the model, just use the directive ngModel:

<input type="text" ng-model="contratos.cep" />
<input type="text" ng-model="contratos.cidade" />

Remembering that the value returned from PHP must be a JSON object.

  • But I want you to show inside the form fields

  • So, that’s right, I posted as an example these fields, which may be inside a form.

  • You can do so too <input type="text" name="cep" value="{{contratos.cep}}"> but it’s not right.

Browser other questions tagged html angularjs

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