AngularJS | Validate input values to ensure they fall within acceptable range for both arrow and user input types

I have a text input field where I need to limit the value between 1 and 20. Here is the HTML code snippet:

<input
    type="number"
    class="form-control input-rounded"
    ng-model="Ctrl.new.runner"
    ng-change="Ctrl.newChangeAction(Ctrl.new)"
    min={{minRunnerValue}}
    max={{maxRunnerValue}}
    ng-model-options="{debounce:500}" >
<span ng-show="Ctrl.newObject.runnerWarning">
    <i>{{Ctrl.Object.runnersWarning}}</i>
</span>

MY CTRL:

$scope.runnerWarning = "";

ctrl.minRunnerValue = 1;
ctrl.maxRunnerValue = 20;

I want to validate both user input and arrow key input (Up and Down). While arrow keys work fine, user input validation seems to be not functioning correctly. Additionally, the warning message is not displaying.

Thank you for your assistance.

javascriptangularjserror-handlingcontrollerminmax

Answer №1

Greetings! I have created a simple example using your code snippet.

I hope you find this helpful.

<!-- Check out the JsBin link below -->

Visit the JsBin link here

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

Creating a custom math formula using a combination of Javascript and PHP

Is it possible to apply a math formula from another variable or database? var x = 7; var formula = '+'; var y = 10; By this, I mean that the variables should output = 17 (7 + 10); How can we implement this formula using Javascript or PHP? ...

javascriptphpmathformula

Images are failing to load dynamically in the Ionic application

Since updating to Ionic version 1.0.0-beta.14, I've encountered an issue where my dynamically generated images are no longer showing up. These image links are fetched using a $http.get call. I've checked the console and confirmed that the link is ...

androidangularjsionic-frameworkmobile

Having difficulty organizing ng-options in alphabetical order

HyperText Markup Language <select ng-model="selectLocation" ng-options="key for key in careerlist.location | orderBy: 'key'"> JavaScript (in careerlist controller) location = ["US-CA-San Clemente", "US- UT- Draper", "US-TX-Dallas", "US-L ...

angularjs

What is the best method to assign each key in an Object to the corresponding value in another Object?

Suppose I have an object called data: { first: 'Zaaac', last: 'Ezzell', title: 'Mrs', mail: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83ece6f9f9e6efefb3c3f1e6e7e7eaf7ade ...

javascript

Switch up image origin when image reaches screen boundary

I am trying to create a DVD screensaver with changing images each time it hits the edge, but I can't seem to get it to work. I've attempted using the code snippet below: var img = document.getElementById("myImage"); img.src = 'img/new-image. ...

javascripthtmlcss

jQuery form validation with delay in error prompts

I am experiencing a strange issue with my HTML form validation function. It seems to be showing the alert div twice, and I can't figure out why this is happening. Adjusting the delay time seems to affect which field triggers the problem. Can anyone sp ...

javascriptjqueryhtml

What could be the reason for the handleOpen and handleClose functions not functioning as expected?

I am facing an issue with my React component, FlightAuto, which contains a dropdown menu. The functionality I'm trying to achieve is for the dropdown menu to open when the user focuses on an input field and close when they click outside the menu. Howe ...

javascriptreactjsjsxtoggle

What could be causing me to see a basic checkbox instead of a toggle switch in my React application?

I've been attempting to create a toggle switch that activates dark mode using Bootstrap switches, but when I save the code, it reverts back to a basic checkbox. According to the documentation, for older assistive technologies, these switch elements wi ...

javascripthtmlreactjsbootstrap-4frontend

Implementing Enter key functionality to add items to a Todo list using pure DOM manipulation

var listLis=document.getElementById('list'); const addbutton=document.querySelector('.fa-plus') const inputBar=document.querySelector('.show') function showInput(e){ inputBar.classList.toggle('show') } addbutt ...

javascripthtmlcss

Utilizing $asyncValidators in angularjs to implement error messages in the HTML: A guide

This is my first major form with validations and more. I've set up a Registration form and I'm utilizing ng-messages for validation. The issue arises when I have to check the username, whether it already exists in the JSON server we are using or ...

javascriptangularjsangular-promise

function for app.get callback in express.js

Hey there, I'm a bit puzzled by the syntax of the get route function because there seem to be two versions. Here's an example of some code: First one: app.get('/users', function(req,res){ ... }); Second one: app.get('u ...

javascriptexpressget

What is the best way to have a text field automatically insert a hyphen after specific numbers?

Is there a way to make a text field insert hyphens automatically after certain numbers? For example, when typing a date like 20120212, could we have the input automatically formatted with hyphens after the first 4 digits and the second two, so it displays ...

phpjavascripthtml

Is there a way to capture all ajax responses?

Is it possible to capture all responses from an ajax request, regardless of the library being used such as jQuery, prototype, or just the vanilla XMLHttpRequest object? I am looking for a way to append to any existing handler without removing it. Thank y ...

javascriptajaxxmlhttprequest

Provide the aggregated content within d3's text() or html() function

Below is my d3 code snippet: grouping.append('foreignObject').html(function (d) { var string = '<p>hello, {{ "there" }} <some-directive></some-directive></p>'; string = $compile(string)(scope); return stri ...

javascriptangularjsd3.js

The value entered for creating a payment method is invalid: the card must be in the form of an object

I am in the process of setting up a payment method using the Next.js library from Stripe. Here is the code snippet: import React, { FunctionComponent } from 'react'; import type { DisplaySettingsProps } from '@company/frontoffice/types' ...

javascriptreactjsnext.jsstripe-payments

best practices for transferring object data to a table with ng-repeat

I have an object called 'SEG-Data with the following structure. I am attempting to display this data in a table using ng-repeat. SEG_Data Object {ImportValues: Array[2]} ImportValues: Array[2] 0: Object ImportArray: "004 ...

javascripthtmlangularjsangularjs-ng-repeat

Detecting drag events between connected angular ui-trees is a complex yet achievable task

How can I trigger an action when an item is dragged from tree#1 to tree#2 and dropped? I want to make a specific HTTP call to save the transferred item. I have successfully implemented actions within one tree using the 'dropped' event, but strugg ...

javascriptangularjsangular-ui-tree

Utilizing the jQuery slideToggle method on the specified target element

I'm encountering an issue with jQuery slideToggle, and here's the code I have: $(".dropdownmainmenu").click(function(){ $(this).children(".showmenu").slideToggle(); $(this).toggleClass("activemainmenu"); $(this).find(".showarrowmainmen ...

javascripthtmljquerydrop-down-menudropdown

Using Node.js and Express to import a simple JavaScript file as a router

Can anyone help me understand how to import the user.json json file into my user.js? I want the json file to be displayed when typing /user but I'm struggling with the new version of Node. index.js import express from 'express'; import body ...

javascriptnode.jsexpressrouter

Tips for managing Ajax JSON response in a PhoneGap application

Although there are a few posts on this topic, I am struggling to piece together the necessary components to make it work. I am in the process of converting a web application into an app using phonegap and I am attempting to create a search form that retri ...

javascriptjqueryajax