How do I clean fields with angular?

Asked

Viewed 6,058 times

4

I want to be able to clear the fields after Submit and also apply the action at other times, for example when clicking the "back" button used delete $scope.NomedaNgModel; But he doesn’t clean

  • I think to clear the value of the variable in controller should solve.

2 answers

3

You can clear the object as follows, so the ng-model will mirror it to the view:

(function() {
  angular
    .module('MinhaApp', []);

  angular
    .module('MinhaApp')
    .controller('MeuController', MeuController);

  MeuController.$inject = [];

  function MeuController() {
    var vm = this;
    
    vm.limpar = _limpar;
    vm.objeto = {};

    _iniciar();

    function _iniciar() {
      vm.objeto.nome = 'TESTE';
      vm.objeto.tipo = 'TESTE 2';
    }

    function _limpar() {
      vm.objeto = {};
    }
  }
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MinhaApp">
  <div ng-controller="MeuController as vm">
    <input type="text" ng-model="vm.objeto.nome" />
    <input type="text" ng-model="vm.objeto.tipo" />
    <button ng-click="vm.limpar()">Limpar</button>
  </div>
</div>

3

var myApp = angular.module('myApp', []);

myApp.controller("testectrl", function($scope){

  $scope.limpaCampos = function(dados){
  	delete $scope.teste;
    $scope.zeraCampos.$setPristine();
  } 
  
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp" ng-controller="testectrl" name="zeraCampos">
  
  <label>Campo1</label><input type="text" ng-model="teste.cp1">
  <label>Campo2</label><input type="text" ng-model="teste.cp2">
  <label>Campo3</label><input type="text" ng-model="teste.cp3">

  <button ng-click="limpaCampos(teste)">enviar</button>
  
</form>

  • What are you using the "test" variable for? What is the "$setPristine()" for? "zeraCampos" is not there undefined?

  • @Sorack $setPristine according to documentation is useful when we want to "reuse" a form after saving it or resetting it, thus restoring its true primitive state, in the case of zeraCampos, angular creates a form name scope automatically, to better manipulate the forms

Browser other questions tagged

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