Exploring Angular's regex functionality with different input types

When using type='text' for input, the ng-pattern validation works while the ng-max validation does not.

In contrast, when using type='number', the ng-pattern validation fails to work while the ng-max validation functions properly. This results in allowing an unlimited amount of zeroes at the beginning and end of the input.

For example:

<input name="input" type="number" placeholder="0.00"
      data-ng-model="example.value"
      data-ng-max="100"
      data-ng-pattern="/^0(\.\d{1,2})?$|^[1-9]\d{0,14}(\.\d{1,2})?$/"
      data-ng-required="true"/>

http://plnkr.co/edit/hv3qrTZzBy8RlPGT8Snv?p=preview

How can this issue be resolved?

javascriptregexangularjsvalidation

Answer №1

Kindly review the Plunker provided to see if it is functioning correctly now. http://plnkr.co/edit/r6FiR5ZSnnDpcJW2893U?p=preview

 <input
    name="input"
    type="number"
    placeholder="0.00"
    data-ng-model="example.value"
    max="100"
    data-ng-pattern="/^0(\.\d{1,2})?$|^[1-9]\d{0,14}(\.\d{1,2})?$/"
    data-ng-required="true"/>

A small modification was made, but sometimes that's all it takes. :)

As per the official documentation, you should use [max="string"] instead of "ng-max".

https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

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

When utilizing R, it is important to verify parameters when passing a function as an input to another function

When working in R, I found myself facing a challenge. How can I properly check the parameters of a function that is passed to another function as an input (as discussed on stackoverflow.com/questions/74044185)? Specifically, I need to ensure that the funct ...

rfunctionvalidation

Addressing Equity Concerns within JavaScript Programming

I can't figure out why the final line in this code snippet is returning false. Is it not identical to the line above? const Statuses = Object.freeze({ UNKNOWN : 0, OK : 1, ERROR : 2, STOPPED : 3 }); class myStatus extends Object{ co ...

javascript

"Exploring the features of next-auth server-side implementation in the latest version of Next.js,

Is it possible to utilize next-auth in a Next.js 14 application router to access user sessions and display page responses using SSR? If so, what steps need to be taken? ...

javascriptreactjsnext.jsnext.js13next-auth

The issue is that dates submitted from jQuery are not being captured in the POST variable in

I'm currently in the process of integrating fullcalendar into my php application. However, I've encountered an issue when trying to save events to the database - specifically, the database only accepts title and url if they are enclosed in doubl ...

javascriptphpjquerymysqlajax

What could be the reason the forEachRow function is not impacting the second or subsequent pages within the dhtmlx grid?

I'm trying to format the grid rows as they load. My goal is to have the row appear in red with some conditions. It works correctly for the first page, but not for subsequent pages of the grid. Below is my detailed code. If anyone knows why this is hap ...

phpjavascriptajaxdhtmlx

Is there a way to incorporate a pixel stream within a React component?

Calling all developers experienced in customizing webpages with pixel streams - I need your help! After following Unreal's documentation on pixel streaming (), I successfully set up a pixel stream. I can modify the default stream page, but I'm s ...

javascriptreactjspixelunreal-engine4unrealscript

Toggle Form Section Visibility

I am working on a table with five rows that have upload buttons. Each time I submit a row, the page refreshes, but I want to hide all but one row at a time. When the first submit button is clicked, it should show the next row and hide the previous ones. Th ...

javascriptphpjqueryhtml

Replacing a select tag based on a change in its sibling element is a common task in

I am dealing with three select tags that are displayed in a cascading manner within a div. These select tags have identical HTML structure, with the only difference being the options they contain. They all share the same name and id attributes. <div cl ...

javascriptjquery

What is the best way to include a second (concealed) value in a cell using datatables

Query: How can I send specific cell values to a controller using POST method, where one value is visible and the other is hidden? For instance, each cell contains both Time and Date data but only the Time is displayed in the datatable. I need to post both ...

javascriptjqueryajaxdatatables

Techniques for navigating unidentified JSON structures using JavaScript

Currently, I am faced with the challenge of parsing the given data: { 'unknown-value': { name: 'AB', id: 'BLUE' }, 'unknown-value': { name: 'AC', id: 'PURPLE' } } My objec ...

javascriptjsonparsing

Creating head tags that are less bouncy

After running my code, I noticed that the headlines didn't transition smoothly - they seemed to jump rather than flow seamlessly. To address this issue, I attempted to incorporate fadeIn and fadeOut functions which did improve the smoothness slightly. ...

javascriptjquerycss

Tips for creating a sticky or fixed Mega Menu that remains in place when scrolling

I have been experimenting with a Mega Menu code snippet that I found on this codepen link. Here is a small example of the menu HTML structure: <div class="content"> <ul class="exo-menu"> <li> &l ...

javascripthtmljquerycsstwitter-bootstrap-3

Steps to fix issues with Cross-Origin Read Blocking (CORB) preventing cross-origin responses and Cross Origin errors

var bodyFormData = new FormData(); bodyFormData.set("data", "C://Users//harshit.tDownloads\\weather.csv"); bodyFormData.set("type", "text-intent"); //axios.post("https://api.einstein.ai/v2/language/datasets/upload", axio ...

javascriptjquerynode.jsreactjsaxios

The ckeditor vanishes upon refreshing the div element

I have created two pages named openclosediv.php and content.php. The openclosediv.php page contains a list of records and a button that can show/hide the div, bringing in the content from content.php. However, I am facing an issue where the CKEditor in the ...

phpjavascriptjqueryhtmlckeditor

Having trouble getting the Angular 2 quickstart demo to function properly?

Just starting out with Angular 2, I decided to kick things off by downloading the Quickstart project from the official website. However, upon running it, I encountered the following error in the console: GET http://localhost:3000/node_modules/@angular/ ...

javascriptangulartypescriptsystemjs

Troubleshoot: Inline Styling Problem with Bootstrap 4 Popover

Is there a way to dynamically change the color of the Bootstrap 4 popover title using inline HTML style attributes? It seems that the plugin is removing them without any logical reason. Below is an example demonstrating this issue: $('#test'). ...

javascripthtmlcssbootstrap-4

How to showcase elements[i] from an array using React

I need to cycle through an array of objects and display each item in a component, with the prop being the index number of the array item. This is the snippet of code I have: import React from 'react'; import './projecten.scss'; import ...

javascriptarraysreactjsobject

Is it better to handle timezone processing on the server side or on the client side?

What is the best way to handle timezone calculations - on the server or on the client using a JavaScript library like Moment? Currently, I am handling it on the server with the help of this library: https://github.com/camroncade/timezone and implementing ...

javascriptphplaravel

Tips for handling CORS redirect problem during ajax post requests

After successfully signing in to the roundcube instance on a different server using an external login form with a post method type, I encountered an error when attempting to sign in via ajax: XMLHttpRequest cannot load . The request was redirected to &apo ...

javascriptphpajaxcors

Integrating NPM module into your Bower Grunt AngularJS Build

Trying to incorporate an npm module into a project built on Angularjs 1.4, Grunt, and Bower has been quite challenging. The limitations of the angularjs framework make it difficult to utilize both Require and Import statements for accessing the node_modul ...

javascriptangularjsnpmgruntjsbower