Creating Angular 1.5 components with Form and utilizing the $setPristine method

Question

Creating Angular 1.5 components with Form and utilizing the $setPristine method

Currently, I am attempting to implement a form within an Angular 1.5 component.

The form is functional as I have successfully achieved model binding and can access the data upon submission. However, the final piece of the puzzle that is missing is the ability to reset the form properly using $setPristine.

I have tried a few different methods, with my initial approach involving passing the form as an argument to the reset function.

In my form.html file:

<form name="$ctrl.userForm">
  ...
  <input class="btn btn-default" type="button" ng-click="$ctrl.reset($ctrl.userForm)" value="Reset" />
</form>

And in my form.component.js file:

ctrl.reset = function(userForm) {
    ctrl.user = {};
    userForm.$setPristine // This returns: Cannot read property '$setPristine' of undefined
};

You can view the full code on Plnkr here.

I also attempted initializing $ctrl.userForm as an empty object during $onInit, but this did not yield the desired result either. Removing the $setPristine line allows the reset function to clear the form's data, however, it does not reset its state from an Angular perspective.

If anyone has any insights or ideas on what might be missing, I would greatly appreciate the help.

javascript angularjs forms

Answer 1

Answer №1

In your Plunkr, the entire component is declared below.

function formController() {
  var ctrl = this;
  ...

  ctrl.reset = function(userForm) {
    ctrl.user = {};
    userForm.$setPristine
  };

  ctrl.reset();
}

The error originates from the line ctrl.reset(); where you are calling the method without passing the argument userForm. Additionally, you are using $setPristine incorrectly and there is no need to pass the form as an argument.

I recommend using the form declared in your controller like this:

angular
  .module('application')
  .component('mkForm', {
    templateUrl: 'form.html',
    controller: formController
  });

function formController() {
  var ctrl = this;
  ctrl.master = {};

  ctrl.update = function(user) {
    ctrl.master = angular.copy(user);
  };

  ctrl.reset = function() {
    ctrl.user = {};
    ctrl.userForm.$setPristine();
  };
}

Note: You do not need to call ctrl.reset(); because the pristine state is already the default state.

Answer 2

In your Plunkr, the entire component is declared below.

function formController() {
  var ctrl = this;
  ...

  ctrl.reset = function(userForm) {
    ctrl.user = {};
    userForm.$setPristine
  };

  ctrl.reset();
}

The error originates from the line ctrl.reset(); where you are calling the method without passing the argument userForm. Additionally, you are using $setPristine incorrectly and there is no need to pass the form as an argument.

I recommend using the form declared in your controller like this:

angular
  .module('application')
  .component('mkForm', {
    templateUrl: 'form.html',
    controller: formController
  });

function formController() {
  var ctrl = this;
  ctrl.master = {};

  ctrl.update = function(user) {
    ctrl.master = angular.copy(user);
  };

  ctrl.reset = function() {
    ctrl.user = {};
    ctrl.userForm.$setPristine();
  };
}

Note: You do not need to call ctrl.reset(); because the pristine state is already the default state.

Creating Angular 1.5 components with Form and utilizing the $setPristine method

Answer №1

Similar questions

Unspecified behavior for a dropdown menu within an Angular form

Enhancing the WheelPicker feature in React Native JS by adding a string in front of a specific selected item

Validate AJAX form with additional string input

Two draggable elements and two droppable containers all conveniently placed on a single webpage

What is the most effective method for sorting through an array to generate a new array?

React Router relies on a DOM for Browser History to function properly

Having trouble grasping ES6 concepts with Reactjs?

Utilizing XMLHttpRequest alongside a node.js server running on the Express framework

What causes the fixed div to appear when scrolling horizontally?

Server-side form validation in Node.js with client-side feedback handling

What is the best way to store data from multiple selected rows in different datagrids into a single state?

Interactive Vue components with dynamic children and sub-children

In Javascript, when trying to call Firebase database child(), it may sometimes result in the return value being "

The value of $parent.$index will consistently be 0 in all cases

Angular UI router view is loaded successfully, however, there appears to be an issue

Implementing a switch feature with enable/disable functionality in a material table using table row data

Can Appcelerator Titanium download and execute JavaScript code dynamically?

When using Material UI, it is not possible to apply the text-overflow: ellipsis and overflow: hidden properties to multiple

Error Message: While attempting to use the aggregate function, I encountered a CastError where the value "totalsales" could not be cast to an ObjectId for the "_id" path in the "Order" model, as it is of type string

Unable to locate NPM-installed modules in the local directory