Unable to clear form using `$setPristine` command

Whenever I try to execute the code below to reset my form, I encounter an error:

 $scope.resetForm = function () {
            $scope.testForm.$setPristine();
}

Here is the HTML snippet:

<form name="testForm" >

                <label class="item item-input item-stacked-label">
                    <span class="input-label">Title</span>
                    <input type="text" ng-model="formData.shortDesc" required="">
                </label>
 <button class="button button-block button-positive" type="submit" ng-click="resetForm()" >Save </button>

</form>

Answer №1

Everything seems to be working perfectly. You can check out the JSFiddle link for reference. Make sure to include the condition for form existence in your code, like so:

function MyCtrl($scope) {
    $scope.saveFormData = function() {
        if ($scope.testForm) {
           $scope.testForm.$setPristine();
           $scope.formData = {};
        }
    };
}

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

The command 'create-react-app' is not valid and cannot be recognized as an internal or external command, operable program, or batch file

I've been struggling to set up a React project, as the create-react-app my-app command doesn't seem to be working. Can anyone offer some assistance? Here are the commands I'm using: npm install -g create-react-app create-react-app my-app ...

Integrating jquery events and functions with angularjs

Recently, I've come across this piece of code: $('.btn').click(function() { $(this).removeClass('big-red-button'); $(this).addClass('btn-loading'); $(this).find('.text').text('Working..'); ...

Deliver integers using Express.js

When I try to send a response with Express using the code below, it doesn't work: res.send(13245) An error message is displayed: express deprecated res.send(status): Use res.sendStatus(status) instead src/x.js:38:9 (node:25549) UnhandledPromise ...

Obtaining page information from a frame script in e10s-enabled Firefox: A guide

One of the challenges I'm facing is with my Firefox extension, where a function loads page information using the following code: var title = content.document.title; var url = content.document.location.href; However, with the implementation of multi- ...

Activate fullscreen mode in Krpano on desktop by clicking a button

Is there a way to activate fullscreen mode upon clicking a button? I believe I should use the code: krpano.set(fullscreen,true); Currently, I have an image within a slideshow that includes a play button overlay. Once the button is clicked, the slideshow ...

Empty Array result from push operations during Node.js/Express GET request

Currently, I am in the process of coding a function that involves calling an API to fetch URLs. Below are the specific steps I aim to achieve: Take in an array of objects (specifically restaurants) as input Initiate a call to the Google Search API for ea ...

Enhancing User Experience in Bootstrap 4: Making Dropdown Parents Clickable Links

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbar ...

What could be causing the 304 error when using $http.get?

I'm a newcomer to angular and facing an issue with a service that was functioning perfectly, but suddenly stopped. The service I am referring to has the following method. this.retrieveForms = function() { return $http.fetch("/forms"). then(fu ...

Guide to parsing HTML tables using JavaScript

I have a set of HTML tables generated from a pandas data frame in the following format: list_html = [<table border="1" class="dataframe"> <thead> <tr style="text-align: right;"> <th></th> <th>score</th> &l ...

Tips for eliminating duplicate data entries within a row while building a table using ReactJS

Apologies for the not-so-great title, but I'm having trouble figuring out how to tackle this specific issue in reactjs. I'm struggling with creating a table where one column remains empty while the other continues to populate with data. This is ...

Learn how to dynamically alter the background color of a webpage by utilizing a JSON API for random color selection

My goal is to trigger a javascript function onload that will dynamically change the background color of the webpage using random colors fetched from a JSON file. ...

Synchronizing jQuery parameters

I have developed a JavaScript shopping basket where the total sum updates automatically when a quantity is selected. However, I encountered an issue where the total value does not update when a product is removed unless the page is refreshed. Here's ...

Using Promise<void> instead of Promise<any> is the preferred approach

Working with AngularJS, I have created several asynchronous functions that all use the same signature, which is app.Domain.GenericModel.EntityBase (my generic model). Here is an example: get(resource: string): ng.IPromise<app.Domain.GenericModel.Entity ...

JQuery is facing difficulty in animating a div following the completion of a "forwards" css animation

Check out this example: http://jsfiddle.net/nxsv5dgw/ A div appears on the stage and a CSS animation is applied to it. However, when attempting to use JQuery to animate the same properties that were animated by CSS, it seems to no longer work properly. ...

Using Angular's $http service to send a file to a web API endpoint from a post function

I'm facing an issue with uploading a javascript file or transmitting a javascript file to a post function. On the client side, I am using angularjs $http service to send the data as follows: $http({ method: "POST", ...

Having trouble updating a MongoDB array through a RESTful API PUT request

I'm brand new to the MEAN stack and recently completed a tutorial. I've been working on enhancing a simple application that utilizes a RESTful API to update a MongoDB. Currently, I'm using a PUT statement to modify specific parts of my colle ...

Mongoose search operation coming up with a blank array

Whenever I utilize $search in mongoose, it returns an empty array. Data Model const mongoose = require('mongoose'); const studentSchema = new mongoose.Schema({ name: { type: String }, }); studentSchema.index({ name: 'text' }); con ...

I need to loop through an array of ids and add a new mongodb document for any ids that are missing. What is the best way to ensure that they are saved permanently?

Currently, I am utilizing Node JS and MongoDB to manage a collection of documents containing IDs ranging from 1 to 5000. Nevertheless, there are certain IDs that are absent, and I would like each document to be assigned one unique ID. Below is the snippet ...

Unleashing the power of XPath and wildcards in AJAX

Can anyone explain why the variable objProperties, which contains an xpath with a wildcard, is coming up empty in this scenario? function getXMLServerObject (httpType, cmd, isAsync) { var object = new Array(); $.ajax({ type: httpType, ...

The functionality of 'Access-Control-Allow-Origin': '*' is not operational

I attempted to address all inquiries pertaining to this tag, yet I encountered a hurdle. Where did I go wrong? $(document).ready(function () { $.ajax({ type: "GET", url: "http://www.tcmb.gov.tr/kurlar/today.xml", dataType: "xml ...