ng-pattern permits the character "+" despite the regular expression restricting to only digits

My current method involves using the regex /^[0-9]+$/ to restrict text box input to numbers only. While it is functioning correctly, I have noticed that when a user types something like +124, the text box is not being recognized as invalid.

<form name="myForm" novalidate>
  <input type="number" ng-model="age" name="age" ng-pattern="/^[0-9]+$/" />
  <h3>Valid Status: {{myForm.age.$valid}}</h3>
</form>

Input: 123 Output: myForm.age.$valid - true

Input: -123 Output: myForm.age.$valid - false

Input: +123 Output: myForm.age.$valid - true (shouldn't be true)

https://plnkr.co/edit/3OVE6qiWgJozUb3hyFQ5?p=preview

Answer №1

To ensure the pattern functions correctly, it is essential to specify the type attribute as text. In addition, if you wish for users to input only digits into the field, include an onkeypress validation:

<input type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57" ng-model="age" name="age" ng-pattern="/^[0-9]+$/" />

With this setup, there may not even be a necessity for the ng-pattern regex to be included.

Answer №2

To utilize this, all you need is:

ng-pattern="/^[0-9]+$/"

No need to change the input type to number (the default text type should work perfectly fine).

Check out the JSFiddle example here: https://jsfiddle.net/3ju3b2tu/1/

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

Dealing with reactive form controls using HTML select elements

I am working with a template that looks like this: <form [formGroup]="form"> <mdl-textfield type="text" #userFirstName name="lastName" label="{{'FIRSTNAME' | translate}}" pattern="[A-Z,a-zéè]*" error-msg ...

What is the best way to use createElement in JavaScript to insert <p> and <span> elements within a <div>?

I am currently experimenting with generating sentences accompanied by draggable text boxes. To achieve this, I intend to construct the following HTML structure using JavaScript exclusively: <div> <p>Data1<span class = "smallBox droppabl ...

The page refreshes automatically when the search icon is clicked, but the ajax method does not trigger the page reload

Whenever I click on the search-box <a>, the JavaScript is triggered but doesn't execute the ajax method filter_data_guide_specs(). Instead, the page automatically reloads and fails to read the JS code. HTML <div class="form-group"> < ...

Is there a way to change a model attribute in JSP based on the AJAX response?

I have a JSP page that contains the following code snippet: <li id="notifications"> <c:choose> <c:when test="${empty alerts}"> <p class="text-default">There are no Service Reminders at this time</p> ...

Traversing a JavaScript class within a for loop

I am attempting to access the locations listed in json.responseJSON.Sites, starting with LHR on the first iteration and then NJE on the next one, and so forth. The notifications for each location are "LHR" and "NJE", respectively. Is it possible to achieve ...

Looking for matching index in rotated array

Currently, I am working on a design with a reference rectangle (colored in red). Within a rotated container div (#map), I am trying to create a duplicate rectangle (in yellow) that matches the size and position of the original "base" rectangle, regardless ...

Retrieve the array from the response instead of the object

I need to retrieve specific items from my database and then display them in a table. Below is the SQL query I am using: public async getAliasesListByDomain(req: Request, res: Response): Promise<void> { const { domain } = req.params; const a ...

How can Vue handle passing an array in this scenario?

In my code snippet, I am attempting to build a simple form builder application. The goal is to include multiple select fields in the form. I encountered a problem with passing an array into a loop. Despite my efforts, the code did not work as expected. Ho ...

unable to retrieve the li element's ID when clicked

I am working on a code snippet to display tabs with dynamic content. $start = strtotime($_GET['date']); $dates = array(); for ($i = 0; $i <= 7; $i++) { $date = date('Y-m-d', strtotime("+$i day", $start)); $date1 = $ ...

The Bootstrap modal window refuses to shut down

In my React application, I am utilizing Bootstrap modal functionality. One specific requirement is that the modal window should remain open when clicking on the modal backdrop. To achieve this, I have implemented the following code: $(".modal").modal({"ba ...

The dynamic duo of MongoDB and Prisma: forging a groundbreaking one-to-many relationship

Is it possible to establish a one-way m-to-n relationship without requiring both collections to have each other's ids? I am attempting the following: model Country { id String @id @default(auto()) @map("_id") @db.ObjectId ...

Encountering an error of "undefined" following a successful display of values in the

This is my inaugural angular-node application and I am encountering an issue when attempting to display the value retrieved from a getQuestion method in qa.service.ts. The getQuestion function is responsible for fetching data from the backend based on the ...

What is the best way to display a modal box using NodeJs on the server side?

I recently created a contact page on my website where users can fill out a form. Upon submitting the form, I capture the information using a post method in my server.js file. If everything is correct, I want to display a modal box on the contact page to co ...

RectAreaLight in Three js does not produce any light reflection when used with MeshPhongMaterial due to lack of support for OES_texture_half

After trying to incorporate a RectAreaLight into my three.js scene where I have objects with MeshPhongMaterial, I noticed that there is no light reflection on the objects. A useful example can be found here: Link If you open the developer tools, you can s ...

Avoiding the use of destructuring for undefined values in JavaScript can be achieved by implementing

Upon receiving the response registryReportSettings from the server: this.getRegistrySettings(registry.Id).subscribe((registryReportSettings: { extended: ReportPropertiesRequest }) => { const { objectProperties, reportProperties, textProperties } = reg ...

Delay loading of external JavaScript with data attributes

Exploring options for lazy loading this code snippet: <script async src="https://comments.app/js/widget.js?3" data-comments-app-website="TvibSQx_" data-limit="5" data-color="29B127" data-dislikes="1" dat ...

Strategies for resolving a mix of different data types within a single parameter

Here, I am setting up the options params to accept a value that can either be a single string or another object like options?: string[] | IServiceDetail[] | IServiceAccordion[]; However, when attempting to map these objects, an error is encountered: Prope ...

I developed a compact application utilizing Node.js in tandem with Express framework

There is an issue with the GPA calculator app built using Node.js and Express. It works fine for a single user, but when multiple users try to use it simultaneously, the scores are being combined, resulting in incorrect values. I need to create an app that ...

"Enhance Your Website Navigation with a Expand/Collapse Menu Using

After stumbling upon this code that allows a menu to collapse when the user clicks on the minus sign, I noticed that it displays all the contents within the Main Item when the page first loads. My goal is to only show the Main Item when the page initially ...

Tips for effectively utilizing the select feature with Firebase data within the Angular UI typeahead functionality

I am currently attempting to integrate Angular-UI typeahead with data retrieved from my Firebase database. The structure of the data is as follows: Data:{ "-JL8IPEAs0vLSt4DJ4V9": { "name": "Something" }, "-JL8IbggYn3O8jkWoPmv": { "name": "Something Els ...