scripter scripter - 3 months ago 37
AngularJS Question

Reset form on submit

I am submitting a form and then making all the field empty but it's not working. Form is getting submitted successfully but the fields are not getting reset. I am using angular-material for styling. Updated controller.

Html

<form name="myform">
<md-input-container>
<label for="name">Contact Name</label>
<input type="text" md-maxlength="20" required="" md-no-asterisk name="name" ng-model="info.name" md-autofoucs>
<div ng-messages="myform.name.$error" role="alert">
<div ng-message="required">This is required.</div>
<div ng-message="md-maxlength">The name has to be less than 20 characters long.</div>
</div>
</md-input-container>
<md-input-container>
<label for="phone">Phone Number</label>
<input type="text" name="phone" required md-no-asterisk ng-model="info.phone">
<div ng-messages="myform.phone.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label for="email">Email</label>
<input type="text" name="email" ng-model="info.email">
</md-input-container>
<md-input-container>
<md-button class="md-primary" ng-click="saveit(info)">Save</md-button>
<md-button class="md-primary">Cancel</md-button>
</md-input-container>

</form>


**Function in Controller**
angular.module('contact', ['ui.router', 'ngMaterial', 'templates','ngMessages'])
.config(['$mdThemingProvider', '$stateProvider', function ($mdThemingProvider, $stateProvider) {

$mdThemingProvider.theme('default')
.primaryPalette('blue')
.accentPalette('orange');

$stateProvider
.state('home', {
url: '',
templateUrl: 'templates/home.html',
controller: 'MainCtrl as vm'

});

}]).controller('MainCtrl', function ($scope, $mdSidenav,$mdDialog,$mdToast, contacts) {

var vm = this;
$scope.searchText ="";

$scope.toggleSidenav = function(){
$mdSidenav('left').open();
};

contacts.getall().then(function(response){
console.log(response.data);
$scope.people = response.data;
});

$scope.saveit = function(detail, myform){

if (!detail.name || !detail.phone) { return ;}

contacts.add({
name: detail.name,
phone: detail.phone,
email: detail.email
});
$mdToast.show(
$mdToast.simple()
.content("ContactAdded!")
.position('top, right')
.hideDelay(2000)
);
$scope.people.push(detail);
$scope.info = {};
$scope.myform.$setPristine();
$scope.myform.$setUntouched();

};

$scope.showConfirm = function(ev, person) {
var confirm = $mdDialog.confirm()
.title('Are you sure?')
.ariaLabel('Lucky day')
.targetEvent(ev)
.ok('Please delete it!')
.cancel('I want to keep it.');
$mdDialog.show(confirm).then(function() {
contacts.deletethis(person.id).then(function(){
$mdToast.show(
$mdToast.simple()
.content("Deleted!")
.position('top, right')
.hideDelay(2000)
);

});
var index = $scope.people.indexOf(person);
$scope.people.splice(index,1);
}, function() {
$scope.status = 'You decided to keep your debt.';
});
}; });

Answer

You are not using $scope and this for controller correctly. You can use $scope or controller as syntax to bind your scope with view.

I suggest you to read more about it here.

Update your saveit() function inside controller as below:

app.controller('MainCtrl', function($scope, $mdSidenav, $mdDialog, $mdToast) {

  var vm = this;
  vm.info = {};

  //your rest the code

  vm.saveit = function() {        
    //do your operations here
    vm.info = {};
  };
});

Update your html page as below:

<div ng-controller="MainCtrl as vm">
 <form name="myform">

    <md-input-container>
      <label for="name">Contact Name</label>
      <input type="text" ng-maxlength="20" required md-no-asterisk name="name" ng-model="vm.info.name" md-autofoucs>
    </md-input-container>
    <md-input-container>
      <label for="phone">Phone Number</label>
      <input type="text" name="phone" required md-no-asterisk ng-model="vm.info.phone">
    </md-input-container>
    <md-input-container>
      <label for="email">Email</label>
      <input type="text" name="email" ng-model="vm.info.email">
    </md-input-container>
    <md-input-container>
      <md-button class="md-primary" ng-click="vm.saveit()">Save</md-button>
      <md-button class="md-primary">Cancel</md-button>
    </md-input-container>

  </form>
</div>