What causes the discrepancy between the values of 'form.$invalid' and the '$invalid' property of 'form'?

When trying to disable a button based on the status of a form, I encountered an interesting issue. After setting all the form values to null, I noticed that when I use the code:

console.log('$scope.assignNewForm.$invalid: ' + $scope.assignNewForm.$invalid);
, it returns false. However, when I use:
console.log($scope.assignNewForm);
, I can see that the $invalid property of the form is actually true. This discrepancy happens simultaneously.

Below is the code snippet I posted:

$scope.questionnaireTitleSelected = function(questionnaireTitle) {

    $scope.assignForm.recipientType = null;
    $scope.assignForm.assigneeName = null;
    resetErrorState();
    $scope.flags.readOnly = false;

    $scope.recipientTypes = _.where($scope.questionnaires, {
      questionnaireTitle: questionnaireTitle
    });

    disabledAssignBtn();
  };

function disabledAssignBtn() {
    if (!$scope.assignNewForm) {
      return;
    }
    console.log($scope.assignNewForm.$invalid);
    console.log($scope.assignNewForm);

    $scope.flags.disabledAssignBtn = $scope.assignNewForm.$invalid || $scope.assignedError || $scope.flags.noQuestionnaires;
  }

Resulting in: enter image description here

Answer №1

It's likely that the $invalid property of the object was altered before you had a chance to view the object in the console. This can occur because the object's properties are assessed at the moment it is collapsed.

Hovering over the i icon beside the object indicates that the

Value below was evaluated just now
.

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

Having trouble with my JavaScript code in Visual Studio because of a bundler issue. It's throwing an Uncaught ReferenceError for trying to access a variable before initialization

My AJAX request looks like this: $.ajax({ method: 'GET', url: '/api/some-data', headers: { 'Content-Type': 'application/json' }, success: function(data) { if (data != null) { var userDat ...

Tips for dynamically changing the class of a form field in jQuery when it is empty

I am currently working on a form that looks like this; <form id="myform" name="myform"> <input type="text" class="required" value="" name="qwer" /><br /> <input type="text" value="" name="asdf" /><br /> <input type=" ...

Strategies for resolving the error message "undefined" following the mapping process

Currently, I am utilizing a custom API to retrieve data. In order to accomplish this, I have structured an object that holds all the necessary data to be retrieved in a dynamic manner. My approach involves using the fetch() function to perform these data r ...

AngularJS enables tab highlighting by responding to button selections

In my application, there are 3 tabs set up as follows: <li ng-class="{ active: isActive('#one')}"><a data-toggle="tab" class="tab-txt-color" href="#one" ng-click="selectTab('fruits') ...

The method you are trying to access in Typescript is not present on the specified class

Here is a code snippet that showcases the use of state handling in TypeScript: type StateTypes = State1 | State2; class State1 { static handleA (): StateTypes { // Do Something return State2; } static handleB (): StateTy ...

Put a cookie in place to deter users from returning to the website

Looking for a way to prevent access to my contest site once the form has been submitted. Is there a way to achieve this? Thanks in advance ...

Passing Values from JQuery to PHP

I have been attempting to retrieve values using a button in jQuery and send them to PHP. Here's how I went about it: My HTML <button class="button" name="reject" value="<?php echo $row['mail']; ?>" type="submit">reject</butt ...

Disable location prompt feature when using AngularJS with Maps API

For my web application, I developed a feature that includes a map with custom markers using Angular loops: <map data-ng-model="mymap" zoom="4" center="[38.50, -95.00]" style="heigth:375px"> <div ng-repeat="item in list"> <marker pos ...

Importing the Monday view in React - A step-by-step guide

I am interested in incorporating one of my Monday boards into my React component. Here is a snippet of the code: import React from 'react' import useI18n from 'hooks/useI18n' import Page from 'components/layout/Page' const Ro ...

"Encountering a Yii2 error when attempting to redirect in controller function via an

My JavaScript request function is as follows: requestSend: function(e) { let data = { request_id: e.target.dataset.request_id }; $.ajax( { url: '/posts/save-changes', method: 'post', dataT ...

Best practices for including jQuery in ASP.NET (or any other external JavaScript libraries)

Can you explain the distinctions among these three code samples below? Is there a preferred method over the others, and if so, why? 1.Page.ClientScript.RegisterClientScriptInclude(typeof(demo), "jQuery", Re ...

Is it possible to trigger Material UI Dialogs from the Parent Component?

Looking for help on how to open two separate Material UI dialogs (Terms & Privacy) from their parent component, a Material UI 'simple menu'. I have already imported and nested them in the parent component, but struggling to figure out how to trig ...

Decoupling functions from Controllers in favor of Directives

It is important to avoid heavy logic calculations in Angular controllers. Within my controller, I have a function that retrieves a list of the last 12 months from the current month: app.controller("MyController", function($scope) { $scope.getLast12M ...

Obtaining the NgModelController for input fields within an ngRepeat directive - a comprehensive guide

Generally, when working with a form and input fields, the form controller is exposed into the related scope under the form name attribute. Additionally, the NgModelController is exposed under the input name attribute. Hence, for an input field with an ngMo ...

Steps for accessing the files uploaded in a React application

Looking to implement an upload button using material UI that allows users to upload multiple files, with the goal of saving their paths into an array for future use. However, I'm unsure about where these uploaded files are stored. The code snippet be ...

Buffering ceases on the video

I am experiencing an issue with 4 videos and a preloader, which should hide once all the videos are fully buffered. <div id="preload"> <h1> Download... </h1> </div> <video preload="auto" class= ...

Customizing Javascript for Mouse Exiting Browser Window

I have implemented a JavaScript function on my website to display a lightbox when the visitor's mouse goes beyond the browser window. You can check it out here: [http://mudchallenger.com/index-test2.html][1] However, there seems to be an issue where ...

SlipHover js functions perfectly on all devices except for iPhones

Recently, I created a simple details page that showcases a product image. When you hover over the image, an overlay slides in with additional information about the product. I was able to achieve this effect using sliphover.js, which can be found at Initia ...

Invoke a method from a related component within the same hierarchy

Imagine this scenario: You're working on a reusable item carousel. The slide track component and the slide navigation component need to be independent and in a sibling relationship so you can position the buttons wherever you want. But how do you trig ...

The result is a combination of the outputs

When a new click on the [Filter] button is made, it does not clear the previous output but instead adds to what already exists. For example, if I filter by "banned" and see the list of banned users, then filter by "registered," the "banned" users are not r ...