Unusual behavior observed in Angular.js using ng-pattern

I've been working on creating a form that can accept Twitter parameters like # and @ to display a Twitter feed.

Initially, I intended to use the ng-pattern directive in Angular.js to validate the input before saving. However, the validation process is behaving oddly. It marks a correctly formatted string as invalid every second character while typing.

Describing this strange behavior is quite challenging, so you can check out the issue on this Plunker.

To provide more context, below is my input field containing the peculiar ng-pattern:

<input type="text" ng-pattern="/(^|\s)@(\w+)|(^|\s)#(\w+)/g" ng-model="foo" name="foo"/>

javascriptregexangularjs

Answer №1

One reason for this behavior is due to the global matching with the g option, which can be resolved by removing it.

Repeatedly calling test or exec has an impact on the current state according to Mozilla Developer Network:

When used multiple times with a global regular expression instance, test will move past the previous match (potentially combined with exec).

The issue is that the pattern is attempting to find another match but cannot locate one:

a = /@(\w+)$/g;
> /@(\w+)$/g
a.exec("@test")
> ["@test", "test"]
a.exec("@test")
> null

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

Drop down calendar in Javascript

I am in the process of developing a virtual JavaScript calendar dropdown feature. I aim to have the correct number of days displayed upon selecting a month, but currently, no days appear when I make a selection. Can someone please assist me with this iss ...

javascript

Is a finished callback needed for .on('xxx') event?

On my dashboard page, I am currently retrieving the top 25 comments and displaying them using the following code: fba.orderByChild('when').limitToLast(25).on('child_added', function (d, c) { stuff }); However, the function is called f ...

javascriptfirebase

Broadcasting TypeScript Data Structures via Socket.IO

In my Typescript code, I have created a basic User class as shown below: export class User { constructor(public id: string); } When I emit a message from my socket.io server, I include an instance of the User class like this: var user = new User(&ap ...

javascripttypescriptsocket.io

The HTML div captured with html2canvas is incomplete

I am currently developing a meme editor website utilizing the html2canvas library available at Below is the HTML code for the div I aim to capture: <div class="container"> <div id="theUserMeme"> <div class=& ...

javascripthtmlhtml2canvas

Can someone please help me figure out how to detect active users within my Next.js application while utilizing Supabase authentication?

I'm looking for a way to recognize users on my app in order to display green badges as visual cues. After logging into my app using Google OAuth, the session remains active even though I logged out days ago. I am unsure of the most effective algorith ...

javascriptreactjsdatabasenext.jssupabase

What is the best way to access a specific value within a two-layered JSON object using JavaScript?

Here is an example of JSON data that I am working with: {"0":{"access_token":"ya29.MgCIagT8PCpkRSIAAAAl-XYEA37OjX_GBAv4so6qv0Gowc5XD3Bp6MuwYAPmnNuwgz7ElXsRwXqGWL4aZpA","token_type":"Bearer","expires_in":"3600","scope":"https://www.googleapis.com/auth/plus ...

javascriptajaxxmljsonobject

Turning a lambda function into a function that is compatible with next.js API: A step-by-step guide

I am currently using an Instagram API to retrieve data from my personal profile, which is triggered by a lambda function on Netlify. Here is a snippet of the code: require('isomorphic-unfetch') const url = `https://www.instagram.com/graphql/quer ...

javascriptnode.jsamazon-web-servicesaws-lambdanext.js

Encountering a maximum call stack size error is a common issue when implementing d3.layout.partition in Angular

I recently developed an AngularJS directive to generate a D3 sunburst chart, but I'm encountering issues. I'm receiving a maximum call stack error in Chrome and a too much recursion error in Firefox. After some investigation, I found that the pro ...

javascriptangularjsd3.js

Leveraging ES6 Symbols in Typescript applications

Attempting to execute the following simple line of code: let INJECTION_KEY = Symbol.for('injection') However, I consistently encounter the error: Cannot find name 'Symbol'. Since I am new to TypeScript, I am unsure if there is somet ...

javascripttypescriptecmascript-6

Angular-schema-form utilizes computed values to dynamically generate form fields based on

I am facing an issue with a form where users input values and I want to display dynamic calculations based on those values. The problem is that the calculation does not update when the numbers are changed. Here is my code snippet: angular.module('cal ...

angularjsangular-schema-form

Transform chosen images into a slideshow using Node.js and Angular JavaScript

I'm currently working on a project where I have an array of images being printed out in Angular, which I can select and download as a zip file. However, I now want to modify this functionality to create a slideshow instead. I've already imported ...

javascriptangularjsnode.jstwitter-bootstrap

Leverage Angular Functions within a Container Environment

I'm trying to create a dynamic checkbox structure using an object response from my service. However, I'm encountering an issue where the function I'm using is returning a string instead of an array, making it impossible to use ngFor. form.d ...

angularjscontainersngfor

Storybook/vue causing issues with aliases not functioning as intended

I'm currently utilizing Storybook for Vue and I am endeavoring to integrate aliases into the webpack config within storybook/main.js: resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', '@': path.resolve ...

javascriptvue.jswebpackstorybook

Increasing the Efficiency of Styled Components

It appears to me that there is room for improvement when it comes to checking for props in Styled Components. Consider the following code: ${props => props.white && `color: ${colors.white}`} ${props => props.light && `color: ${c ...

javascriptreactjsstyled-components

Encountering issues with retrieving a specific document from DocumentDB in Node.js

My goal is to retrieve a specific document from DocumentDB using the document ID. The collection consists of four fields, with author serving as the partition key. { "id": string, "author": string, "title": string, "year": int } I have implemente ...

javascriptnode.jsazure-cosmosdb

Tips for reducing the size of your JavaScript buffer

Is it the correct way to convert a buffer to a string, trim it, and then convert back to a buffer in Node.js v6.12.x? var buf = Buffer.alloc(xxxxxx); ..... // buffer receives its value ..... let buffParsed = String.fromCharCode.apply(null, buf); buffPa ...

javascriptnode.js

Combining the power of Google Blockly with AngularJS

I am looking for a way to empower advanced users to create and save custom math formulas that will be used in a shopping cart check-out process. These users are not programmers, but can follow instructions easily. The formulas should be editable by the use ...

javascriptangularjsexcelvisual-programmingblockly

Developed a query, seeking information for populating a dropdown menu

I am currently in the process of editing a webpage that utilizes both PHP and HTML. Essentially, I have a dynamic list of items being generated where the number of values can vary based on the row length. Next to each item in the list, there is a "delete ...

javascriptphpjqueryhtml

Run a JavaScript function on a webpage loaded through an AJAX response

I need to trigger a function through an AJAX request sent from the server. The function itself is not located on the calling page. Here's an example of what I am trying to achieve: 1. PHP script being called: <script> function execute() { ...

phpjavascriptajax

How does the behavior of ng-repeat differ from that of statically typed code?

Exploring the variation between the generated HTML from ng-repeat and a manually written code: <div id="settings-row-{{key}}" class='settings-row' ng-repeat="(key, value) in items"> <div id='settings-source-{{key}}' class=&a ...

angularjsangularjs-ng-repeatangularjs-model