AngularJs setPristine() not resetting the invalid status of a form

Is there anyone who can assist with the provided Plunker code?

All you need to do is submit the form with just one required field filled out. This action will result in validation errors being displayed. When you reset the form by calling both setPristine and setUntouched functions, none of the validation errors are cleared.

I would like the form to be reset with no data remaining and no validation messages shown. Even though the data is empty and technically invalid, I don't want any error messages to appear.

For example, this is the reset function:

$scope.reset = function(){
    $scope.newQuestion = angular.copy(tempQuestion);

    $scope.forms.setPristine();
    $scope.forms.setUntouched();
};

Here is the link to the Plunker example

Answer №1

  1. Make sure to use the correct syntax when calling setPristine() and setUntouched(). It should be formName.$setPristine() and formName.$setUntouched(). For more information, refer to this page.

  2. If you have set attempted=true in the form, remember to reset its value along with the form itself. This will prevent the error message from being displayed again. The correct code for resetting is:

Here is the modified Plunker link after making these changes.

Answer №2

When you check your console, you might notice some errors popping up. It seems like there is a misunderstanding about the function `setPristine()` in relation to the object `forms` in your code. The correct form name should be `forms.newQuestion`, and the function itself should be referenced as `$setPristine()`. To clear error messages upon resetting the form, simply toggle your `attempted` flag to false, which will result in evaluations of your `ng-class` expressions returning false.

To achieve this functionality, consider implementing something along these lines:

$scope.reset = function(){
    $scope.newQuestion = angular.copy(tempQuestion);

    $scope.forms.newQuestion.$setPristine();
    $scope.forms.newQuestion.$setUntouched();
    $scope.attempted = false;
};

For a demonstration, refer to this working plunker: http://plnkr.co/edit/AbCDefGhIjKLMnoPqrSs?p=preview

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Loading JSON data in AngularJS before parsing and loading HTML content from it

Greetings, I am new to Angular and seeking some guidance. My goal is to limit a list of notifications to three using limitTo, and then load the rest when a button is clicked. Currently, I am unsure about the following: How to set up the "view" and appl ...

issue concerning slide functionality and ajax integration

I'm facing an issue with the structure of my HTML. Here is the setup I have: <div id ="slide1"> <form method="post" id="customForm" action=""> //my content - name, email, mypassword, pass2 </for ...

Can the site be shown in the background?

I have a unique idea for a games website that I want to share. It's a bit difficult to explain, so please bear with me as I try to convey my vision! The inspiration for this project comes from a website called . Have you seen it before? The concept i ...

Sliding with JavaScript

I'm looking to develop a unique web interface where users can divide a "timeline" into multiple segments. Start|-----------------------------|End ^flag one ^flag two Users should be able to add customizable flags and adjust their position ...

Changing a complex array structure in javascript into a CSV format

I have a complex nested array that I need to convert into a downloadable CSV file. My current approach involves iterating through each array and subarray to build the CSV, but I'm wondering if there's a more efficient method available? Here is a ...

Ways to pause for the completion of multiple HTTP promises and display a modal exclusively when all promises result in failure

There are two separate HTTP calls on a page that need to be handled independently. vm.$onInit = function() { .... .... //Retrieve all items during initialization ds.getAllItems().then(function(result){ vm.items = result; },funct ...

Creating NextJS Route with Dynamic Links for Main Page and Subpages

In my NextJS project, I have dynamic pages and dynamic subpages organized in the following folders/files structure: pages ├── [Formation] ├── index.js │ ├── [SubPage].js Within index.js (Formation Page), I create links like this: < ...

Using d3 to showcase pictures sourced from a csv file

Having recently embarked on a journey to learn javascript, d3, and the polymer project, I am facing a challenge that I hope to get some guidance on. After successfully parsing a csv file containing image information and creating an array specifically for ...

Is it possible to compile a .ts file at the root level without following the tsconfig.json configurations?

After dealing with the challenge of having both .ts and .js files coexisting in each folder for months, I have finally managed to get the app to compile correctly. The transition from JS to TS brought about this inconvenience, but the overall benefits make ...

Utilize API to import sunrise and sunset times based on specific coordinates directly into a Google Sheet

After countless hours of trying to crack this code, I’m faced with a final hurdle. The challenge lies in parsing the output from the and storing either the sunrise or sunset time into a variable that can be exported as a result in a Google Sheet. The u ...

Attempting to refresh the choices in a dropdown list by sending a request via jQuery leads to specific

I have a Dropdown on my View that looks like this... <div class="editor-field"> @Html.DropDownListFor(model => model.CategoryId, new SelectList(new List<string>(), ""), "Select ...") </div> Within my controller, there is an action ...

Modifying the CSS properties of elements with identical IDs

Encountering an issue while attempting to modify the CSS property of elements with similar IDs using JavaScript. Currently, running a PHP loop through hidden elements with IDs such as imgstat_1, imgstat_2, and so forth. Here is the code snippet being emp ...

Using HTML5 Canvas with Firefox 4: How to Retrieve Click Coordinates

Lately, I've been diving into creating HTML5 Video and Canvas demos. Initially, my focus was on optimizing them for Chrome, but now I'm shifting my attention to Firefox and Safari as well. One particular demo I'm currently working on involv ...

Middleware GPS server - store location and transmit information to the server

After encountering a roadblock with my chosen GPS tracker service not supporting iframe plugins to share my car's position on my website, I've come up with the idea of creating a middleware server. The plan is to gather data from my GPS device, s ...

Vue js for filtering and replacing prohibited words

For this scenario, our objective is to screen the words in our input: <input type="text" class="form-control" placeholder="Write something..." v-model="todoInput""> Below are the restricted words that we aim to substitute in the input "restrict ...

Assigning websockets to a global variable may cause them to malfunction

I'm utilizing websockets in conjunction with JavaScript and HTML5. Here is the code snippet I am currently working with: <input type="text" onFocus="so = new Websocket('ws://localhost:1234');" onBlur="so.close();" onKeyUp="keyup();"> ...

Steps for resolving "TypeError: Unable to read properties of undefined (reading 'useSystemColorMode')"Ready to overcome this particular error message?

While working on a project with ChakraUI and React JS, I encountered an error at the start that read, "TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')". I have not made any changes to the global theme in Chakra, j ...

Node.js user update complete

I am currently working on enabling users to edit their profiles. However, the code I have set up does not seem to be functioning as expected. The form I am using looks like this: <form action="/dashboard/users/edit/:id" method="put"> And my route ...

When it comes to AngularJS, the concept of undefined or null

Whenever I write watch handling functions, I always make sure to check the newVal parameter for both undefined and null. It makes me wonder why AngularJS doesn't have a specific utility method for this purpose. For example, there is angular.isUndefine ...

Leveraging $last in Angular for obtaining the final visible element with ng-show

My ng-repeat container div contains multiple images, each with a corresponding div next to it. Using $last, I can make sure only the div of the final image is visible after all images. However, I also have a filter button on the page that hides certain im ...