CODEWITHSUNDEEP
javascriptangularjsforms
Elad Benda2
Elad Benda2

Reputation: 15492

how to reset a form in angular 1.5

I have this markup

how can i reset it in my corresponding component?

<form name="voiceForm" novalidate>...</form>

I have tried:

this.voiceForm.$setPristine();
self.voiceForm.reset();

but got an error voiceForm is not defined.

this is my component:

(function (app) {
    app.component('voiceFormComponent', {
        templateUrl: 'partials/voice-form.html',
        controller: ['$scope', '$state', '$stateParams',
            function ($scope, $state, $stateParams) {

                var self = this;

                console.log("in voice prompt component");

                self.addVoice = function () {
                     self.voiceForm.$setPristine();
                     $state.go("add");
                }

Upvotes: 0

Views: 380

Answers (3)

DeejC
DeejC

Reputation: 179

I had a similar problem when I had a form within a form (which isn't allowed) and the fix was to use ng-form for the sub-form instead. Perhaps try ng-form?

Upvotes: 0

sahed moral
sahed moral

Reputation: 385

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name="myfrom">
      <input type="text" ng-model="data.name">
      <input type="text" ng-model="data.phone">
      <input type="text" ng-model="data.city">
      <input type="button" ng-click="reset_from()" value="reset">
    </form>
    {{data}}
  </body>

</html>

<script>
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.data = {name:"Sahed sawon",phone:"8801714999720",city:"Dhaka"};
  $scope.reset_from = function() {
    $scope.data = {};
  }
});

</script>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222722

You can pass the form and call setPristine

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

app.controller('MainCtrl', function() {
this.data = {
name: ''
};

this.reset = function(form) {
this.data.name = '';
form.$setPristine();
};

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="formReset">

<head>
<title>form.$submitted</title>
<script src="http://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="app.js"></script>
</head>

<body>
<div ng-controller="MainCtrl as ctrl">
 <form name="form" novalidate>
  <input name="name" ng-model="ctrl.data.name" placeholder="Name" required   />
  <input type="submit" />
  <button type="button" class="button" ng-click="ctrl.reset(form)">Reset</button>
</form>

<pre>

 Submitted: {{form.$submitted}}

</pre>
</div>

Upvotes: 1

Related Questions