Using a number input with step increments of 0.01 in AngularJS can result in undefined values for specific inputs

An issue arises when using a specific type of input in angularjs (1.6.1) where the values between 9.03 to 9.05 inclusively return undefined. This problem also occurs with other values like 9.62, 9.63, and 17.31.

<input type="number" step="0.01" data-ng-model="$ctrl.numericValue" />

You can see this issue replicated in this fiddle. Just click up in the numeric input.

Testing was done on Firefox and Chromium under Linux Mint 18.

The problem seems to be related to the "step" attribute. When it's set to "0.001", there is no problem. However, for this application, it is critical to have 2 decimal places.

Note: If the value is initially set to 9.03 via data-numeric-value, it does not result in undefined.

Are there any workarounds for this bug?

Edit

An updated fiddle showcases the behavior with step="0.01" versus step="0.001".

Edit 2 I created a Plunkr while submitting a bug report and discovered that the bug was fixed in the "snapshot" version, which is 1.6.2. Unfortunately, this version is currently unavailable for download from the AngularJS website.

javascriptangularjs

Answer №1

There seems to be a glitch in the Angular framework. Even with version 1.6.0, the issue persists. However, reverting back to Angular 1.5.9 seems to resolve the problem. It appears that something went amiss between these two versions and the bug still exists in 1.6.1.

The recommended action would be to report this bug to the Angular development team for further investigation.

If feasible, a temporary fix for your project could involve downgrading to Angular 1.5.9.

These findings were based on tests conducted on Windows 7 using both Firefox and Chrome browsers.

Answer №2

It seems like an unusual bug caused by JavaScript's handling of floating point numbers. My recommendation would be to adjust your input so that it has a different increment (ideally using whole numbers, like a step of 1), and then divide the retrieved value by 100.

Answer №3

While it may not be the most elegant solution, one way to achieve this is by incorporating jquery before angular in your code:

 <script
    src="https://code.jquery.com/jquery-3.1.1.js"
    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
    crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

Give an id to the input field:

<input id="numericValue1" type="number" step="0.01" ng-model="$ctrl.numericValue1" />

Then, utilize the id to retrieve the value:

ctrl.showValue1 = function(){
    return "value 1 is " + $('#numericValue1').val() + " and its type is " + typeof ctrl.numericValue1;
  };

I trust that this solution meets your needs!

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

Invalid number of arguments for pure functions

I am currently facing an issue in angular2 (rc-1) where I am passing an array of strings to my function through component binding. However, when the array length exceeds 10, an error occurs: Unsupported number of argument for pure functions: 11 This erro ...

javascriptangularjstypescriptangular

How to retrieve documents in ElasticSearch based on field values containing or including specific values

I am attempting to retrieve documents from elastic search based on fields that include or contain dynamic text. For example: Here are some sample documents retrieved from elastic { id: 12345, name: test66, description: 'some desc231431', entity_i ...

javascriptnode.jselasticsearch

Revamp your arrays with input fields in Vue3

When presented with two arrays of options, users must select an option from each array. ==> first array: [ orange, green, yellow ] ==> second array: [ orange, green, yellow ] The challenge is to update the second array based on the user's sele ...

javascriptarraysvue.jsinputvuejs3

Different methods to retrieve content within a div that is located on a separate, included page

It's a bit tricky to come up with a title for this topic, but essentially, I'm trying to figure out how to get content from an included page into a specific div using HTML and PHP. Let me break it down: In the header.php file, we have the follo ...

javascriptphpjqueryhtml

Unable to access frame: Error - Unable to retrieve 'add' property from undefined

I am working on customizing the chatbot functionality for my website built with Nuxt.js. I want the chatbot to display on certain pages while remaining hidden on others. Unfortunately, I encountered an issue when trying to hide it on specific pages. To im ...

javascriptcssvue.jsdomnuxt.js

Is there a way to seamlessly transition between images in a slider every 3 seconds using javascript?

<!DOCTYPE html> <html> <head> <title>Hello</title> <meta http-equiv="Content-Type" type="text/html" charset="UTF-8"/> <style> *{margin:0; padding:0;} .mySlides{ position:relative; width:1000px; ...

javascripthtmlcss

"Encountered a reference error in Node.js Express due to an undefined

const _expressPackage = require("express"); const _bodyParserPackage = require("body-parser"); const _sqlPackage = require("mssql"); //Initializing the app with the express web framework ...

javascriptnode.jsexpress

Tips for toggling the visibility of a flexbox-styled popup using jQuery

I am trying to implement a popup on my website and I want to use flexbox styling for it. I have the necessary scss mixins for flexbox properties, however, I encountered an issue. The problem arises when I try to hide the popup using display: none, as the ...

javascriptjqueryhtmlcssflexbox

Effective URL structure with nested ui-view in AngularJS

It is common knowledge that Angular functions as a SPA (Single Page Application). I am seeking the most effective approach to display a main left-side menu selector page, where clicking on any menu item will load the content in the right-side view div. Th ...

javascripthtmlcssangularjsangular-ui-router

Finding Text Between Two Distinct Strings Using Regular Expressions in JavaScript

I am currently utilizing AJAX technology. My approach involves sending a GET request that retrieves a raw HTML string representing the content of a webpage. I am grappling with the challenge of isolating all elements enclosed between div tags: <div ro ...

javascriptregexajax

Combine large arrays

Hey, I'm encountering some issues while trying to merge large arrays in a React Native app. Specifically, I am attempting to implement infinite scroll on React Native. The issue arises when the array reaches 500+ items; every time I add more items, my ...

javascriptarraysreactjsreact-nativeoptimization

How to manage form submissions in Vue.js using inputs within child components

I'm working on a parent component that acts as a form. This form consists of multiple child components, each containing input fields. <template> <div class="form"> <generalData v-model="input" /> <textAreas v- ...

javascriptvue.jsvuejs2

Unexpectedly Vertical Bootstrap Navigation Bar instead of the expected Horizontal design

By using the same css classes as those found on the Twitter Bootstrap website, my horizontal navigation bar has been transformed into a vertical one. While maintaining the same div layout and classes (with the exception of the bs-* classes) as the Bootstra ...

angularjsbootstrap-4

Adaptively linking to the property of a deeply nested object

Attempting to bind to a property of a nested object using [(ngModel)], but facing the challenge that the path to the property is dynamically set. Consider the following three classes: class A { p1: C constructor() { p1 = new C("A") } } class B { p2: ...

javascriptangulartypescriptangular-ngmodel

Personalizing the look of Stripe Payment Component in a React Application

Currently, I have integrated the Stripe Payment Element into my React application using the code snippet below: import { useStripe, useElements, PaymentElement, } from '@stripe/react-stripe-js' export const PaymentDetails = () => { const st ...

javascriptreactjsstripe-payments

Is there a way to define the width of an element within the display:flex property in CSS?

Could you please review the following: https://codepen.io/sir-j/pen/dyRVrPb I am encountering an issue where setting the input [type=range] to 500px doesn't seem to make a difference from 100px, 500px, or 800px. This leads me to believe that display ...

javascripthtmljquerycss

Set the current time to ISO8601 format

I need assistance with creating a "time passed" counter for my website based on an API call that returns data in the following format: "created_at": "2018-05-16T14:00:00Z", What is the best approach to calculate and display the time that has passed since ...

javascripthtmliso8601

Updating a data with a JavaScript browser script

Recently, I have been attempting to modify the timer in a game using scripts found on various websites. My coding skills are not top-notch, so I am seeking some assistance. I am keeping my fingers crossed that the timer is not server-sided. Upon inspecting ...

javascriptfacebook

Personalized jQuery Slider, Go back to initial slide

Working on enhancing my jQuery skills by constructing a basic slider with 3 slides. The slider wrapper, with a fixed width of 1400px and a height of 350px serves as the outer container. Within this wrapper lies an unordered list where its items are floate ...

javascriptjqueryhtmlcss

Unable to make a div grow within a Popper component in a React.js application

I'm facing a challenge with implementing a CSS feature and need some assistance. https://i.stack.imgur.com/KXpGd.png Upon clicking the "See link options" button, the content loads but spills out of the popper. My goal is to have the popper expand in ...

javascripthtmlcssreactjsfrontend