angularjs issue with $setPrestine function not providing reliable results

I have encountered an issue with the login form code. Initially, I am able to reset the form fields and error messages successfully on the first attempt (both success and failure scenarios work). However, on the second try, I am unable to reset the form fields. Additionally, the login process fails to show any notifications for success or failure. This is due to the data being undefined at this point, leading to an error 415 (Unsupported Media Type) in the console. Strangely, if I remove the reset function, the login process works correctly. Can someone help me identify what I am doing wrong with the reset function?

Here is the part of the controller related to this issue:

 App.controller('HomeCtrl', ['$scope', 'Users', '$window', '$location', '$rootScope', 
function($scope, Users, $window, $location, $rootScope) {

        var original = $scope.users;
        $scope.users = {};
        $scope.form = {};

    $scope.reset = function() {
            $scope.users = angular.copy(original);
            $scope.form.loginForm.$setPristine(); 
        };
    } ]);

Answer №1

Your situation may be due to the user form field not resetting properly.

Instead of using

$scope.users = angular.copy(original);
, try using $scope.users = {};

If necessary, you can start by defining

var original = $scope.users || {} ;

For further assistance, please refer to the documentation available here.

I hope this solution is helpful for you!

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

What could be causing the RxJS Observable to malfunction within a Vue.js app container?

Can anyone explain why the RxJS Observable in the "whatever" div is functioning properly, while the one in the app div for Vue.js is not working? (I am aware of modules that can bridge the gap between Vue.js and RxJS on NPM, but I am curious about why the ...

Accessing React Context globally using the useContext hook

I'm feeling a bit puzzled about how the useContext hook is intended to function in a "global" state context. Let's take a look at my App.js: import React from 'react'; import Login from './Components/auth/Login'; import &apos ...

What is the best way to pass an email as a Laravel parameter within a function using Angular?

I'm currently working on a feature that allows users to delete their account only if the input field matches their email address. However, I encountered an error: Error: $parse:lexerr Lexer Error when attempting to set this up. Here is my HTML code: ...

Issues with image uploads in Node.js database storage

Trying to update an image using the put method is resulting in a 'filename' undefined error. Interestingly, the image updates successfully when editing without changing the image. The code snippet below shows the implementation: app.put('/a ...

Repeated instances in a loop are strictly prohibited

I am facing an issue with AngularJS where I am unable to display JSON data in my HTML. Below is the code I am using: $('.loading').show(); $scope.posts=[]; $http.get("https://api.basebear.com/json/tables/20a3fb1d-42c7-45cb-9440-2c6d5d10403d/r ...

Using ngBindHtml in combination with angularUI in a template may yield a different outcome compared to using $sce.parseAs

Edit: Problem solved! Details at the end of the question. Within my directive sfNgFieldWrapper, I have integrated a tooltip from angularjUI ui-bootstrap. The text for the tooltip is designated by tooltip="{{ttpText}}". The issue arises when the text con ...

The system encountered an error while trying to access the file "/box/main.c" because it does not exist in the directory

Currently, I am working on a project that requires the use of judge0 API. Initially, everything was running smoothly when I utilized it with RapidAPI. However, I made the decision to switch to a self-hosted setup using a docker-compose.yml file. While my ...

A guide on retrieving the values of all child elements within an HTML element using Puppeteer

I have been exploring the capabilities of puppeteer and am trying to extract the values from the column names of a table. <tbody> <tr class="GridHeader" align="center" style="background-color:Black;"> <td cl ...

Incorporate a background image property using Jquery

Can anyone help me with adding the css background-image:url("xxxxx") property to my code? jQuery('#'+$trackID+' .sc_thumb').attr('src',$thumb_url); jQuery('#'+$trackID+' .sc_container').css('display& ...

Having trouble implementing pagination for news-api in Vue.js2?

I am currently working on implementing a basic pagination feature in my Vue component specifically for the newsapi.org API. While my initial API call in the created hook is functioning as expected, I am encountering difficulties navigating to different pa ...

Combining various AngularJS factories under a single 'factories' object

I am trying to create a factory in the same way I create a controller, by organizing multiple factory objects that perform various tasks. In EX1(see code below), my goal is to define several factories and store them all within a 'factories' objec ...

Navigational elements, drawers, and flexible designs in Material-UI

I'm working on implementing a rechart in a component, but I've encountered an issue related to a flex tag. This is causing some problems as I don't have enough knowledge about CSS to find a workaround. In my nav style, I have display: flex, ...

Using object bracket notation in TypeScript to retrieve values from props with the help of string interpolation

I encountered an issue in my code while attempting to utilize a variable within my TSX component. This problem arises due to the dynamic props being passed into the component, which are always a string that matches one of four keys in the "characters" obje ...

Import .vue single file component into PHP application

I've been struggling to integrate a .vue single file component into my php app without using the inline template method. Since I don't have a node main.js file to import Vue and require the components, I'm not sure how to properly register m ...

Is there a way to customize the appearance of a MUI5 Tooltip using emotion?

I went through the information in this Stack Overflow post and experimented with the styled method. The code snippet I used is as follows: import * as React from 'react'; import { styled } from '@mui/material/styles'; import Tooltip, { ...

receive the output of the inquiry

Here's the issue I'm facing: file accounts.controlles.ts import { requestT } from "src/service/request.api"; export const getaccounts = async () => { const response = await requestT({ method: "GET", ur ...

Is it feasible to capture a screenshot of a URL by using html2canvas?

Is it possible to take a screenshot of a specific URL using html2canvas? For example, if I have the following URLs: mydomain.com/home mydomain.com/home?id=2 mydomain.com/home/2 How can I capture and display the screenshot image on another page? window ...

Exploring ways to retrieve information stored in localStorage within an android mobile application

I am currently developing an Android App using phonegap. The app is a simple game that generates random numbers for math problems. If the user answers correctly, their score increases, but if they lose, their name and current score are saved in localStor ...

Issue with conflicting versions in Bower dependencies

Just starting out on an angular project and incorporating bower. I've added two packages with --save to update my bower.json file. After running bower update, this is the result I get: Please take note that, ng-token-auth#0.0.29 requires an ...

Is it possible to iterate over an array and invoke a function at the same time?

const students = ['John', 'Mark']; const weight = [92, 85] const height = [1.88, 1.76] function yourBodyMass(name, funct, mass, height) { console.log(`${name}, your body mass index is ${funct(mass, height)}.`) } function calculateBM ...