How to reset a form in AngularJS using either HTML or a built-in directive

Question

How to reset a form in AngularJS using either HTML or a built-in directive

Within a standard modal popup in Bootstrap, I have implemented a form consisting of input fields, a submit button, a cancel button, and a close-icon. When selecting the name from an Object data-list using ng-repeat, the popup containing the form will display.

The following scenarios are present:

Validation can be performed on the input fields by entering valid data and then clicking Submit. No problems encountered
If one chooses to click Cancel or the close icon without entering any value in the input fields, there are no issues.
Entering invalid data into the input fields and clicking Submit has been handled appropriately. No concerns
If invalid data is entered and then Cancel or the close icon is clicked, this presents an issue.

The final scenario highlights the existing issue:

In the case where the first element from ng-repeat is clicked, the form loads within the popup. If the user closes the modal when the form contains errors, upon reopening, the form does not reset. This project uses 'controller as' instead of $scope, so $scope.formName.$setPristine() cannot be utilized from the controller directly.

A common way to reset the form would usually involve using the $scope in the controller but I am seeking an alternative method utilizing HTML and directives like ng-init.

EDIT 1:

As requested, I have included the code snippet along with a demonstration link: [https://jsfiddle.net/shashank2691/0k496jyd/](https://jsfiddle.net/shashank2691/0k496jyd/)

Note: In the demo example, upon clicking Submit in the popup, errors are displayed for invalid input fields.

Expected:

Upon closing and reopening the popup after initially opening it (with invalid form data), errors should not be displayed unless the fields are still invalid and the Submit button is pressed.

Actual:

When reopening the popup for the second time, errors beneath the invalid input fields are displayed once more.

HTML:

<div ng-app="app" ng-controller="test as ctrl">
  <h4 class="lead" align="center">
Popup Display
</h4>
  <div class="row">
    <div ng-repeat="item in ctrl.dataList" class="col-xs-6 form-group" align="center">
      <div class="img-thumbnail pointer" ng-click="ctrl.openPopup(item)" data-toggle="modal" data-target="#testPopup" data-backdrop="static">
        <span>{{item.name}}</span>
      </div>
    </div>
  </div>


  <div id="testPopup" role="dialog" class="popup-modal-section modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <form name="inputForm.form" novalidate ng-submit="ctrl.saveData(inputForm.form.$valid, ctrl.selected);">
            <h3 class="lead" align="center">
Profile Details:
</h3>
            <div class="form-group">
              <div>
                <label>Name</label>
              </div>
              <div>
                <input type="text" class="form-control" ng-model="ctrl.selected.name" name="name" ng-required="true" />
                <span class="error" ng-show="(inputForm.form.name.$error.required || inputForm.form.name.$invalid)">Name is required</span>
              </div>
            </div>

            <div class="form-group">
              <div>
                <label>City</label>
              </div>
              <div>
                <input type="text" class="form-control" ng-model="ctrl.selected.city" name="city" ng-required="true" />
                <span class="error" ng-show="(inputForm.form.city.$touched &&  inputForm.form.city.$error.required) || (inputForm.form.$submitted &&     inputForm.form.city.$error.required)">City is required</span>
              </div>
            </div>

            <div align="right">
              <button class="btn btn-primary" type="submit">
                Submit
              </button>
              <button class="btn btn-default" data-dismiss="modal">
                Close
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

JS:

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

app.controller('test', function() {
  var vm = this;
  vm.dataList = [{
    "id": "0",
    "name": "Pankaj M."
  }, {
    "id": "1",
    "name": "Rakesh G."
  }, {
    "id": "2",
    "name": "Piyush C."
  }, {
    "id": "3",
    "name": "Danny K."
  }];

  vm.openPopup = function(data) {
    vm.selected = angular.copy(data);
  };

  vm.saveData = function(isValid, data) {
    console.log('Form Valid ', isValid);
  };
});

CSS:

.pointer {
  cursor: pointer;
}

.error {
  color: red;
}

Demonstration available at: [https://jsfiddle.net/shashank2691/0k496jyd/](https://jsfiddle.net/shashank2691/0k496jyd/)

javascript angularjs forms

Answer 1

Answer №1

One issue arises when utilizing the Twitter Bootstrap modal since it utilizes the same HTML template for all modal instances, which may not be desirable.

An optimal solution would involve eliminating Twitter Bootstrap (along with jQuery) as they are unnecessary. Instead, a specialized Angular directive such as the UI Bootstrap $modal service would be recommended.

This approach results in a more angular-centric design rather than relying heavily on jQuery.

Controller:

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

app.controller('test', function($uibModal) {
  var vm = this;
  vm.dataList = [{
    "id": "0",
    "name": "Pankaj M."
  }, {
    "id": "1",
    "name": "Rakesh G."
  }, {
    "id": "2",
    "name": "Piyush C."
  }, {
    "id": "3",
    "name": "Danny K."
  }];

  vm.openPopup = function(data) {
    $uibModal.open({
      bindToController: true,
      controllerAs: 'ctrl',
      templateUrl: 'profile.html',
      resolve: {
        user: angular.copy(data)
      },
      controller: function(user) {
        this.selected = user;
      }
    }).result
    .then(function(updated) {
      vm.saveData(data, updated);
    })
  };

  vm.saveData = function(data, updated) {
    angular.extend(data, updated);
    console.log('Form Valid', data);
  };
});

Modal HTML:

<div class="modal-body">
  <form name="inputForm.form" novalidate="" ng-submit="inputForm.form.$valid && $close(ctrl.selected)">
    <h3 class="lead text-center">Profile Details:</h3>
    <div class="form-group">
      <div>
        <label>Name</label>
      </div>
      <div>
        <input type="text" class="form-control" ng-model="ctrl.selected.name" name="name" ng-required="true" />
        <span class="error" ng-show="(inputForm.form.name.$error.required || inputForm.form.name.$invalid)">Name is required</span>
      </div>
    </div>
    <div class="form-group">
      <div>
        <label>City</label>
      </div>
      <div>
        <input type="text" class="form-control" ng-model="ctrl.selected.city" name="city" ng-required="true" />
        <span class="error" ng-show="(inputForm.form.city.$touched &&  inputForm.form.city.$error.required) || (inputForm.form.$submitted && inputForm.form.city.$error.required)">City is required</span>
      </div>
    </div>
    <div align="right">
      <button class="btn btn-primary" type="submit">Submit</button>
      <button class="btn btn-default" type="button" ng-click="$dismiss()">Close</button>
    </div>
  </form>
</div>

Demo: http://plnkr.co/edit/NuOWdDHzDiN2hszB5u4P?p=info

Answer 2

One issue arises when utilizing the Twitter Bootstrap modal since it utilizes the same HTML template for all modal instances, which may not be desirable.

An optimal solution would involve eliminating Twitter Bootstrap (along with jQuery) as they are unnecessary. Instead, a specialized Angular directive such as the UI Bootstrap $modal service would be recommended.

This approach results in a more angular-centric design rather than relying heavily on jQuery.

Controller:

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

app.controller('test', function($uibModal) {
  var vm = this;
  vm.dataList = [{
    "id": "0",
    "name": "Pankaj M."
  }, {
    "id": "1",
    "name": "Rakesh G."
  }, {
    "id": "2",
    "name": "Piyush C."
  }, {
    "id": "3",
    "name": "Danny K."
  }];

  vm.openPopup = function(data) {
    $uibModal.open({
      bindToController: true,
      controllerAs: 'ctrl',
      templateUrl: 'profile.html',
      resolve: {
        user: angular.copy(data)
      },
      controller: function(user) {
        this.selected = user;
      }
    }).result
    .then(function(updated) {
      vm.saveData(data, updated);
    })
  };

  vm.saveData = function(data, updated) {
    angular.extend(data, updated);
    console.log('Form Valid', data);
  };
});

Modal HTML:

<div class="modal-body">
  <form name="inputForm.form" novalidate="" ng-submit="inputForm.form.$valid && $close(ctrl.selected)">
    <h3 class="lead text-center">Profile Details:</h3>
    <div class="form-group">
      <div>
        <label>Name</label>
      </div>
      <div>
        <input type="text" class="form-control" ng-model="ctrl.selected.name" name="name" ng-required="true" />
        <span class="error" ng-show="(inputForm.form.name.$error.required || inputForm.form.name.$invalid)">Name is required</span>
      </div>
    </div>
    <div class="form-group">
      <div>
        <label>City</label>
      </div>
      <div>
        <input type="text" class="form-control" ng-model="ctrl.selected.city" name="city" ng-required="true" />
        <span class="error" ng-show="(inputForm.form.city.$touched &&  inputForm.form.city.$error.required) || (inputForm.form.$submitted && inputForm.form.city.$error.required)">City is required</span>
      </div>
    </div>
    <div align="right">
      <button class="btn btn-primary" type="submit">Submit</button>
      <button class="btn btn-default" type="button" ng-click="$dismiss()">Close</button>
    </div>
  </form>
</div>

Demo: http://plnkr.co/edit/NuOWdDHzDiN2hszB5u4P?p=info

Answer 3

Answer №2

Based on your explanation, it seems like there may be a scope issue with the form. One way to resolve this is by passing the form into the submit or close function and then calling pristine within that function. Here's an example:

$scope.submit=function(form){
  form.$setPristine();
}

Alternatively, you can avoid this issue by creating an object in your controller and assigning the form as a property of that object. Like so:

$scope.formObject={};

In your HTML, use dot notation for the form name like this:

<form name="formObject.test_form">
 ...
</form>

If possible, it would be helpful if you could provide your code for further assistance.

Answer 4

Based on your explanation, it seems like there may be a scope issue with the form. One way to resolve this is by passing the form into the submit or close function and then calling pristine within that function. Here's an example:

$scope.submit=function(form){
  form.$setPristine();
}

Alternatively, you can avoid this issue by creating an object in your controller and assigning the form as a property of that object. Like so:

$scope.formObject={};

In your HTML, use dot notation for the form name like this:

<form name="formObject.test_form">
 ...
</form>

If possible, it would be helpful if you could provide your code for further assistance.

Answer 5

Answer №3

There are multiple ways to achieve this:

You can create a reset method for your form model and trigger it when your modal is closed:

function TestCtrl($scope) {
  $scope.initModel = function() {
    $scope.fields = {
      "something": "INITIAL VALUE"
    };
  };
  
  $scope.initModel();
}
angular
  .module('test', [])
  .controller('TestCtrl', ['$scope', TestCtrl])
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="test">
  <article ng-controller="TestCtrl">
    <form name="test" ng-submit="onSubmit($event, test)">
      <input ng-model="fields.something" type="text" />
    </form>
  </article>
</section>

Another approach is to create a specific application state for the form, allowing you to call a $location change and re-instantiate each bound controller (an example would get too complex here, but feel free to ask for more details if needed).

Answer 6

There are multiple ways to achieve this:

You can create a reset method for your form model and trigger it when your modal is closed:

function TestCtrl($scope) {
  $scope.initModel = function() {
    $scope.fields = {
      "something": "INITIAL VALUE"
    };
  };
  
  $scope.initModel();
}
angular
  .module('test', [])
  .controller('TestCtrl', ['$scope', TestCtrl])
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="test">
  <article ng-controller="TestCtrl">
    <form name="test" ng-submit="onSubmit($event, test)">
      <input ng-model="fields.something" type="text" />
    </form>
  </article>
</section>

Another approach is to create a specific application state for the form, allowing you to call a $location change and re-instantiate each bound controller (an example would get too complex here, but feel free to ask for more details if needed).

How to reset a form in AngularJS using either HTML or a built-in directive

Answer №1

Answer №2

Answer №3

Similar questions

Guide on effectively sending a secondary parameter in an ajax request

Adjusting the settimeout delay time during its execution

Issue with JSON or Jquery: Uncaught error message: Cannot access property 'error' as it is null

Using the class for jQuery validation as opposed to the name attribute

What is a global variable used for in JavaScript?

An error occurred while trying to update with Webpack Dev Server: [HMR] Update failed due to an issue fetching the update manifest,

Exploring the world of Node.js and the power of 64-bit var

Tips on altering a predetermined input text value using JavaScript

Sending a 2-dimensional array from JavaScript to the server using AJAX

Node.js - Hitting maximum call stack size limit despite using process.nextTick()

Is it possible to retrieve the current CSS value set by a media query using JavaScript?

repeated firing of keydown event in ReactJS

Troubleshooting: MongoDB/mongoose post save hook does not execute

Every Dynamic Post automatically defaults to the initial object

The server has sent cookies headers, however, the browser did not store the cookies

Tips for modifying the value of a JSON object using Javascript or Jquery

What is the reason behind the non-linear execution sequence of JS functions when controlling an sqlite3 database?

Update the displayed image on the webpage based on information retrieved from the database

Utilizing the v-for directive to loop through JSON data with unique IDs and linking them to Input components in PrimeVue

The issue of React Js's inline style malfunctioning when using a loop condition