Why is the $invalid field true in a different Angular view?

I have implemented some conditions to display my revision field. This involves accepting a number and setting it as a required field, so I have included validation checks for this purpose. Additionally, I have excluded this field from the 'edit' view by specifying the condition accordingly.

ng-show="editMode=='addNew' || editMode=='addDate'"

Despite the fact that the field is not visible in the edit view, the $invalid status seems to be true across all views.

<div class="form-group" ng-show="editMode=='addNew' || editMode=='addDate'">
     <label for="editmyRevision" ng-class="{'col-sm-3':editMode=='addNew'}"  class="col-md-2 control-label">Revision</label>
    <div ng-class="{'col-sm-9':editMode=='addNew'}" class="col-md-10">
     <input class="form-control" ng-model="editmyRevision"name="revision" ng-required="editMode=='addNew' || editMode =='addDate'" ng-maxlength="5" ng-Pattern="/^[0-9]*$/"></input>
       <span class="has-error help-block" data-ng-show="prodEdit.revision.$invalid">Acceptable formats: 100~99999</span>

   </div>
    </div>

What could possibly be the issue here?

javascriptangularjs

Answer №1

ng-show doesn't actually remove the input from the form, but rather applies a display:none style to it, keeping the form invalid.

If you want the input to be completely removed, consider using ng-if instead.

<div class="form-group" ng-if="editMode=='addNew' || editMode=='addDate'">

Answer №2

There are several syntax errors in your code. Make sure to use $invalid for the form instead of the input.

Replace with:

<input class="form-control" ng-model="editmyRevision"name="revision" ng-required="editMode=='addNew' || editMode =='addDate'" ng-maxlength="5" ng-Pattern="/^[0-9]*$/"></input>
<span class="has-error help-block" data-ng-show="prodEdit.revision.$invalid">Acceptable formats: 100~99999</span>

New code:

<input class="form-control" ng-model="editmyRevision" name="revision" ng-pattern="/^[0-9]{3,5}$/"/>
<span class="has-error help-block" data-ng-show="prodEdit.revision.$error">
   Acceptable formats: 100~99999
</span>

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

Challenges of hosting AngularJS along with images

I am completely new to the world of development, so please bear with me as I ask this question. After successfully deploying my site to Azure, everything seems to be working fine except for the angular components and the images. Regarding the images: ...

asp.net-mvcangularjsazureweb-hosting

Angular html5 mode failing to serve index.html via Express

When attempting to implement html5 mode in my Angular JS app for better SEO, I encountered a challenge with Express serving index.html upon request. This resulted in deep linking issues and the inability to refresh the page. This is how my App.js is curre ...

angularjshtmlexpress

Waiting for a NodeJS function to finish execution

In my application, I have a `Client` class that requires different configurations for each user when receiving messages on Discord (a chat application with its own API calls for checking new messages). I have initialized the object constructor with new con ...

javascriptnode.js

JSON input that appears to be correct but unexpectedly ends

I'm currently coding a discord bot and came across this snippet: function addFunds(id, amount){ accounts = fs.readFileSync("accounts.data", 'utf8'); console.log(JSON.parse(accounts)) var obj = JSON.parse(accounts); var i; for (i in ...

javascriptnode.jsjson

Discovering the maximum value and fetching it from an array

Can you help me identify the array element with the highest 'conversion' value? var barTextData = [ { term: "Roof", clicks: 11235, conversion: 3.12 }, { term: "Snow", clicks: 6309, conversion: 4.45 }, { term: "Chains" ...

javascript

CSS Bootstrap JS failed to load on localhost upon refreshing the page

Every time I access my localhost Laravel project for the first time, it loads fine. However, when I refresh the page, I start receiving 404 errors for CSS, JS, and other files, causing the layout of the webpage to change. Essentially, Bootstrap JS files ar ...

javascriptlaravelapacheserverbootstrap-5

How to prevent error message from displaying when text is clicked on in AngularJS

I am new to AngularJS and I have just started working on form validation. Everything was going well until I tried to hide the error message when the input is focused. When I click the submit button, the error message is shown. However, when I focus on the ...

angularjsvalidationangularjs-forms

Experience screen sharing through WEBRTC without the need for any additional browser extensions

One question that I have is: Is it possible to implement screen sharing that works on a wide range of devices and browsers without the need for plugins or experimental settings? I have searched online and come across some plugins for Chrome, but I am look ...

javascripttypescriptwebrtc

Difficulty accessing PHP information in an external file when using getJSON

In my wos.php file, I have created an array that is then encoded using json_encode and echoed to be used in another file named data.php through jQuery. However, the data is not being received as expected. Here is an example of the array ($recordArray) cre ...

javascriptphpjqueryajaxgetjson

The $routeChangeSuccess event is failing to trigger in ngNewRouter in AngularJS version 1.4

Transitioning from AngularJS 1.3 to AngularJS 1.4 has brought about some changes, including the use of AngularJS's new route method known as ngNewRouter, specifically introduced in AngularJS 1.4. Below is a snippet of my code: var versionModule = ng ...

javascriptangularjsroutesrouter

How to fetch React route parameters on the server-side aspect

I encountered a challenge while working with ReactJS and ExpressJS. The user uploads some information on the /info route using React and axios. Then, the user receives route parameters from the server side to redirect to: axios.post('/info', Som ...

javascriptnode.jsregexreactjsexpress

What is the best method for converting a string picture URL into an image and showcasing it in an image tag?

I have a URL for an image that looks like this: C:\inetpub\MaujApp\OMSAPI\ManualReceivingImages\WhatsApp Image 2021-03-24 at 12.07.41 PM.jpeg My goal is to convert the original image and display it to the user using jQuery. I woul ...

javascriptc#jqueryasp.netajax

acquire an array in javascript from an object

Currently, I am in the process of building a google authentication chat website and everything has been going quite smoothly. In fact, most of the work is already complete, except for one final task - retrieving messages from a JSON database. While I am ab ...

javascriptnode.jsjsondatabase

Vue.js has encountered a situation where the maximum call stack size has been exceeded

I have implemented a method called cartTotal that calculates the total price of my products along with any discounts applied, and I am trying to obtain the final value by subtracting the discount from the total. cartTotal() { var total = 0; var di ...

javascriptvue.js

++first it must decrease before it increases

I'm attempting to create a basic counter feature, where clicking on a button labelled "+" should increase a variable named Score by 1, and the "-" button should decrease it by 1. However, I've encountered an issue where pressing the "+" button fo ...

javascript

Differentiate the values in ng-repeat within angularjs

I have a table where I am populating data using ng-repeat. The table structure is as follows: <table class="table table-bordered table-hover"> <thead> <tr> <th> Sr. no. </th> &l ...

javascriptjqueryangularjshtml-table

Challenge in Decision Making

I am curious why this type of selection is not functioning properly for html select options, while it works seamlessly for other input types like Radios or checkboxes. Any thoughts? $('#resetlist').click(function() { $('input:select[nam ...

javascriptjquery

Node.js and Express: Delegate routes to different endpoints for handling by the Single Page Application, instead of just the root route

I have my node.js/Express server configured to host my Vue.js single page application from the root URL path (localhost:3333) within the public folder. When navigating through my app, everything works smoothly thanks to the vue.js History API handling all ...

javascriptnode.jsexpressvue.jsroutes

The JQuery datepicker fails to provide the date in the format mm/dd/yy

Recently, I attempted to transform a date into the dd/mm/yy format using JQuery datepicker. Unfortunately, my results displayed in the dd/mm/yyyy format instead. Here is the code snippet that I utilized: chkIn = $.datepicker.formatDate("dd/mm/yy", cinDate ...

javascriptjqueryjquery-uijquery-ui-datepicker

Issues with Angular ng-if and function not functioning as expected

When I modify the "anoini" value in the first code, the "gerar()" function displays the old value. However, once I remove <div ng-if...., it works correctly. Do you have any idea what could be causing this issue? Thank you! // JavaScript Document ...

angularjs