Using `$invalid` solely on controls that are visible

I am working on a form that displays controls based on the property 

data-ng-hide="objective.editMode"
: 

<form class="form-horizontal" role="form" name="adduserform">                        
    <div class="form-group">                           
       <label for="title6" class="col-sm-5 control-label">Progress</label>
       <div class="col-sm-6">

          <input data-ng-hide="objective.editMode" type="number" min="0" max="100" 
               data-ng-model="newTask.Progress" class="form-control" required  />
          <input data-ng-show="objective.editMode" type="number" min="0" max="100" 
               data-ng-model="objective.Progress" class="form-control" required  />

       </div>
    </div>    

    <div class="form-group">
       <div class="col-sm-offset-2 col-sm-10">
          <span data-ng-hide="editMode">
             <input data-ng-hide="objective.editMode" type="submit" value="Add" 
                    ng-disabled="adduserform.$invalid" data-ng-click="add()"/>
             <input data-ng-show="objective.editMode" type="submit" value="Save" 
                    ng-disabled="adduserform.$invalid" data-ng-click="Save()" />    
          </span>                 
       </div>
    </div>
</form>

I'm wondering if adduserform.$invalid can only check the displayed controls on the form? Because adduserform.$invalid requires all controls to be filled, but not all controls are visible depending on objective.editMode.

javascriptangularjs

Answer №1

Instead of using ng-hide, you have the option to utilize ng-if:

<input data-ng-if="!objective.editMode" type="number" min="0" max="100" 
           data-ng-model="newTask.Progress" class="form-control" required  />

Answer №2

Concealing elements using data-ng-hide / data-ng-show may keep them in the DOM tree and trigger validation. To address this, switch to data-ng-if as it removes elements from the DOM:

<form class="form-horizontal" role="form" name="adduserform">                        
<div class="form-group">                           
   <label for="title6" class="col-sm-5 control-label">Progress</label>
   <div class="col-sm-6">

      <input data-ng-if="!objective.editMode" type="number" min="0" max="100" 
           data-ng-model="newTask.Progress" class="form-control" required  />
      <input data-ng-if="objective.editMode" type="number" min="0" max="100" 
           data-ng-model="objective.Progress" class="form-control" required  />

   </div>
</div>    

<div class="form-group">
   <div class="col-sm-offset-2 col-sm-10">
      <span data-ng-if="!editMode">
         <input data-ng-if="!objective.editMode" type="submit" value="Add" 
                ng-disabled="adduserform.$invalid" data-ng-click="add()"/>
         <input data-ng-if="objective.editMode" type="submit" value="Save" 
                ng-disabled="adduserform.$invalid" data-ng-click="Save()" />    
      </span>                 
   </div>
</div>

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

combining multiple applications on a single page using AngularJS

I am currently developing an application using AngularJS. Within my application, I have implemented two controllers to manage two distinct views. Below is the JavaScript code: var myApp1 = angular.module('myApp1', []); myApp1.controller(' ...

javascriptangularjs

The Adonis 5 build failed to transfer the environment file to the designated build directory

During my experience with Adonis 5 in production, I consistently encountered an issue where the .env file failed to copy into the build folder when I attempted to run `npm run build`. Is this still considered a bug in the system? ...

javascriptnode.jsenvironment-variablesbackendadonis.js

Angular 2+ enables the creation of dynamic folders and allows for uploading multiple files to the server in a seamless

Can an Angular application be developed similar to FileZilla or Core FTP for uploading files and folders to the server via FTP? I need a way to upload files and folders through the admin panel instead of relying on external applications like FileZilla. ...

javascriptangulartypescript

Is there a way for me to retrieve the information sent in a jQuery Ajax request?

I'm struggling to understand how to retrieve a value previously submitted to a PHP file using AJAX and jQuery. I'm still in the early stages of learning jQuery, so some concepts are challenging for me. Below is my jQuery code: $('#button2& ...

phpjavascriptjqueryajax

Employing ng-repeat and ng-class with rows within a table

In my AngularJS project, I am attempting to achieve a specific effect that involves utilizing the ng-repeat directive. Below is an example of what I would like to accomplish: View <tr ng-repeat='person in people' ng-class='rowClass(pers ...

angularjsangularjs-ng-repeat

Selenium on Sauce Labs does not successfully load the page in Firefox after clicking

An issue has arisen where a test that functions properly with selenium webdriver locally is timing out when executed remotely on saucelabs.com. Notably, the test runs smoothly for Chrome in both local and remote scenarios. The problem seems to lie in the ...

javascriptseleniumfirefoxselenium-webdriversaucelabs

I've come across this ajax url that seems promising, but I keep getting a GET 404 (Not Found)

I am attempting to validate using ajax and php. This is the code I have for my ajax: function PrintRecibopapel() { recibo = document.getElementById("txtCod").value; if(recibo == "") { alert("You must save the receipt before pr ...

javascriptphpajaxhttp-status-code-404google-chrome-console

What is the method to assign a value to ng-class in Angularjs?

I need to categorize items in a list by assigning them classes such as items-count-1, items-count-2, items-count-3, items-count-4, based on the total number of items present. This is how I would like it to appear: li(ng-repeat="area in areas", ng-class=" ...

javascripthtmlangularjs

Unveiling directive functions through a service: A comprehensive guide

Is there a way to share directive methods across modules without using $broadcast or '='? Using $broadcast (events) will notify all directives, but it cannot return a value. I don't think exposing directive functions through HTML attribute ...

angularjsangularjs-directiveangularjs-service

Unable to access child props in parent event handler in React

Currently utilizing React for building a UI, the structure involves a parent component and a child component as shown below: // Child Component var ListItem = React.createClass({ render: function() { var link_details = ( <div> ...

javascriptreactjs

What could be causing a delay in the connection of my async WebSocket using NodeJS and Python?

This is a follow-up to my previous question about utilizing Socket IO and aiohttp for data transfer between Node JS and Python, which was discussed in this helpful tutorial on . Currently, I have an asynchronous connection set up between a Node JS client ...

javascriptpythonnode.jssocket.ioaiohttp

ReactJS is struggling to showcase an image stored in the backend folder with the help of node

As a newcomer to React.js, I am facing a challenge with displaying images fetched from a database. Each action in the data has an array of images associated with it. The issue lies in not being able to properly display these images using the image tag due ...

javascriptnode.jsreactjsexpress

Directive that accesses an element and adds an event listener

I'm in need of developing an attribute directive using Angular 1.5.5 that will restrict inputs based on the keypress event of a text box. The desired output should be like this: <input type="number" name="age" id="age" restrict-char="['e&apos ...

angularjsangularjs-directive

Tips for Combining Multiple Custom Filters in AngularJS

Is there a way to use AngularJS to chain multiple filters together? I have 3 dropdown menus that I want to use as filters to refine the data in a table. I created a Plunk to showcase what I'm trying to achieve, you can view it at this link The filter ...

angularjsangularjs-ng-repeat

Upon clicking close, the icons do not appear as expected

Currently, I am developing an application using Next.js. In this application, there is a functionality where clicking on the hamburger icon in mobile mode hides the icons of a Slide, and upon closing the hamburger, they should reappear. The overall struct ...

javascriptreactjsreact-hooksnext.js

JavaScript technologies that work seamlessly with the parse.com database

We are currently in the process of planning a web application that will be utilizing parse cloud database. We are facing some uncertainty when it comes to selecting the appropriate technology for this project. However, one thing we are certain about is tha ...

angularjsnode.jsbackbone.jsexpressparse-platform

What is the technique for wrapping a component with a rectangle box in ReactJs?

Do you like the design in this example image? I attempted to create a similar layout using Material UI Box, but unfortunately, it only displays the text without rendering the box itself. Take a look at the code I used: import * as React from 'react& ...

javascriptreactjsmaterial-ui

The ReactJS hamburger menu fails to function after being clicked

I'm facing an issue with my responsive navbar. Whenever I click the hamburger menu, it directs me to a blank white page without any content. Can someone help me identify the problem? I am new to react and believe I might need to explore another approa ...

javascriptreactjsreact-reduxreact-hooks

fade out row upon successful deletion using ajax

My code includes an AJAX function to delete items by row. In my table, there is a column with the action to perform the deletion. Here is the AJAX function: //delete detail function deleteDetail(id_po_req_detail) { var tr = ...

javascriptjqueryajax

Verification is required for additional elements within the div block once a single checkbox has been selected

Currently, I am working in PHP using the CodeIgniter framework. I have a question regarding implementing a functionality with checkboxes and validation using jQuery. Here is the scenario I want to achieve: There are four checkboxes, and when one checkbox ...

phpjavascriptjquery