The use of Angular's ng-pattern leads to disruption in the binding process

Here is the form I am working with:

<div class="panel-group">
    <label for="url" tooltip="Enter the Engine as a Web Service (EWS) URL the Empower Editor will use for PDF preview.">EWS URL</label>
    <input id="url" size="50" ng-model="config.ewsUrl" required ><br/>
    <label for="PreviewTimeout" tooltip="Specify how long the Empower Editor will wait for a response from the PDF preview.">Preview timeout (Seconds)</label>
    <input id="PreviewTimeout" type="number" min="15" max="60" required ng-model="config.previewTimeout" style="width: 150px;">
</div>

However, I encountered an issue when I added an ng-pattern attribute to the input field:

<div class="panel-group">
    <label for="url" tooltip="Enter the Engine as a Web Service (EWS) URL the Empower Editor will use for PDF preview.">EWS URL</label>
    <input ng-pattern="/^((ht|f)tp(s?)\\:\\/\\/)?[0-9a-zA-Z]([-.\\w]*[0-9a-zA-Z])*(:(0-9)*)*(\\/?)([a-zA-Z0-9\\-\\.\\?\\,\\:\\'\\/\\\\\\+=&amp;%\\$#_]*)?$/" id="url" type="url" size="50" ng-model="config.ewsUrl" required><br/>
    <label for="PreviewTimeout" tooltip="Specify how long the Empower Editor will wait for a response from the PDF preview.">Preview timeout (Seconds)</label>
    <input id="PreviewTimeout" type="number" min="15" max="60" required ng-model="config.previewTimeout" style="width: 150px;">
</div>

Strangely, removing the regular expression (reg ex) from the input field resolved the issue with the binding. Any ideas on what might be causing this problem?

javascriptangularjs

Answer №1

If you're looking to validate a URL, there's a simple way to do it without using a regular expression or the ng-pattern option. Just use the following code:

<input type="url" id="url" type="url" size="50" ng-model="config.ewsUrl" required/>

The issue with model binding not working is most likely due to the regular expression not properly validating the input values. I've created a plunker to demonstrate how valid and invalid values are handled on a validated field.

Check out the plunker here.

UPDATE - Using ng-pattern

If you need support for older browsers, you may still need to use ng-pattern. Make sure the regular expression is correctly formatted (with leading and trailing slashes, but no "g"). I've provided an example with a regular expression for URLs that you can implement in your code:

  <input id="url" type="url" size="50" ng-model="config.workingUrl2"
    ng-pattern="/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/"
    required/>

See this in action in the updated plunker! Good luck!

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

The JavaScript syntax dollar sign

I am currently studying a JavaScript source code and it's my first time writing JavaScript. I find some of the syntax confusing. <script id="source" language="javascript" type="text/javascript"> $(function () { window.onload=function() ...

javascript

Do you require assistance with creating an image slideshow?

My first day working with HTML was a success as I successfully built a navigation bar that looks pretty cool. Take a look at it here. Next on my list is to incorporate a slideshow into my site, possibly using JavaScript or jQuery plugins. I'm aiming ...

javascriptjqueryhtmlcssplugins

Ways to pass the ng-repeat index from one ng-repeat to another

I am working with an array named "Menu" var Menu = [ "url" : "#", "type" : "F", "id" : "F00001", "name" : "CUST", "child" : [ { "type" : "P", "id" : "C00001", "name" : "CUST INFO" ...

angularjs

Tips for assigning a default value when an error occurs

Currently diving into the world of React and experimenting with rendering 10 pieces of data from a specific API. After crafting a function to iterate through the fetched information, extracting the title and image has been quite the challenge: for (let ...

javascriptreactjs

Add a new key-value pair to the mock data by clicking on it

Hey there! I'm currently tackling a task that involves toggling the value of a boolean and then appending a new key-value pair on click. I've been attempting to use the . operator to add the new key-value pair, but it keeps throwing an error. In ...

javascriptreactjsarrays

Using JavaScript with namespaces in C#

I am currently trying to explore AJAX and web services through self-teaching using C# and JavaScript. After doing some research on Google, it seems like I might be facing a namespace problem. Here is the snippet of my code: using System; using System.Col ...

c#javascriptajaxweb-services

Please click twice in order to log in to Angular 16

Whenever I attempt to log in, I face the issue of having to click twice. The first click does not work, but the second one does. Additionally, an error message pops up: TypeError: Cannot read properties of undefined (reading 'name'). I am unsure ...

angularangularjstypescriptjwtfrontend

Persistent Angular Factory Variables Showing Outdated Data - Instances Stuck with Old Values

One of the challenges I faced was setting up a resource factory to build objects for accessing our API. The base part of the URL needed to be determined using an environment variable, which would include 'account/id' path segments when the admin ...

javascriptangularjs

Error Alert: jQuery Ajax Not Executing

Looking to send form data to PHP using jQuery. Check out the code below. -------------HTML FORM-------------- <div id="createQuestionBlock"> <form id="createQuestionForm" action="" method="POST"> Question Code: <input id="code" ...

phpjavascriptjqueryhtmlajax

Update the URL and content in Django dynamically

When accessing a json response from my Django backend via the URL /inbox/<str:username>, all messages in the conversation with that user are retrieved. The issue arises on the inbox page, where both threads and chatbox are displayed together, similar ...

javascriptpythonjquerydjangoajax

Issue with Many to Many Relation Query in Objection JS, Postgres, and Express Resulting in 'TypeError: Cannot Read Property 'isPartial' of Null' Error

I have a challenge connecting the 'products' table to the 'tags' table using a many-to-many relationship structure with the 'products_tags' table. Upon executing const product = await Product.relatedQuery('tags').fi ...

javascriptnode.jsexpressknex.jsobjection.js

Expanding list - Using individual toggles to expand and collapse multiple list items

I stumbled upon an interesting jquery script that allows for a collapsible sub menu within a list. After implementing this code: $('.menu-item-has-children').prepend('<a id="fa-menu" href="#"><i class="fa fa-plus"></i>< ...

javascriptjquerywordpressslidetoggle

How to Perform a Method Call or Array Iteration in JSX within HTML

Encountering a new issue that I haven't faced before, this is my first time working on something like this and finding a solution is proving to be tricky. Currently, I'm using SendGrid to send an HTML email through a POST request in express on N ...

javascriptnode.jsreactjshtml-email

Using React hooks to update the state of an array from one component to another

I am currently working on a MERN blog website project and I've encountered an issue while trying to update comments on a post. I'm editing the comment from another component but facing difficulty in updating the state after making changes. Would ...

javascriptnode.jsarraysreactjsapi

The jQuery UI Sortable functions are being triggered at lightning speed

I am currently working on a project where users can create a seating chart, add rows and tables, and move the tables between different rows. The functionality for adding rows and moving tables already exists in the code. However, I am facing an issue where ...

javascriptjqueryhtmlcssjquery-ui

Getting the error message "t is not a function. (In 't(i,c)', 't' is an instance of Object)" while attempting to switch from using createStore to configureStore with React Redux Toolkit

I am attempting to switch from react-redux to its alternative react-redux toolkit but I kept encountering this issue t is not a function. (In 't(i,c)', 't' is an instance of Object) and I am unsure of its meaning. Here is the c ...

javascriptreactjsreact-nativereact-redux

Passing data into a different controller

In the process of building a system that involves selecting elements from a list and viewing their details, I have encountered an issue while using MEAN stack. My goal is to pass the id of the selected element to the controller of the second page. However, ...

javascriptangularjsnode.js

Tips for locating the .owl-video-frame class using jQuery in Owl Carousel 2

In my carousel, I have multiple videos displayed as follows: <div id="owl4" class="owl-carousel owl-theme"> <div class="owl-item-container video-aspect-16-9" data-aspect="1.7777778"> <a class="owl-video" href ...

javascriptjqueryvideoowl-carouselowl-carousel-2

"I'm curious about how to reset a form in reactjs hooks after it has been submitted

Just dipped my toes into the world of hooks and I'm stumped on how to clear input fields post-submit. Tried form.reset() but it's not doing the trick. import { useForm } from "react-hook-form"; import.... export default function AddUse ...

javascriptreactjsreact-hooksreact-hook-form

Navigating the art of employing different fonts for a website

I am looking to incorporate the trainway font into my website, but I'm concerned that the user may not have it installed on their device. Is there a way to showcase text in a specific font without requiring the user to download and install it? Thank ...

javascripthtmlcss