Number validation with minimum and maximum constraints

I have two fields where one needs to be smaller than the other, and the second larger than the first while still passing validation.

However, when entering the first number, it is not being saved in the model (saved as undefined) because it does not meet the validation condition "max".

It is important to me that keyboard input is used instead of buttons.

Can someone help me find a solution to this issue?

<td><input type="number" class="form-control input-sm" ng-model="item.low" max="{{item.high-1}}" required></td>
<td><input type="number" class="form-control input-sm" ng-model="item.high" min="{{item.low+1}}" required></td>
javascriptangularjs

Answer №1

Make sure to set up the initial values of item.low and item.high in your controller.

<!DOCTYPE html>
<html data-ng-app>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-init="item.low=0;item.high=1;">
    <input type="number" class="form-control input-sm" ng-model="item.low" max="{{item.high-1}}" required>
    <input type="number" class="form-control input-sm" ng-model="item.high" min="{{item.low+1}}" required>
    <p>item.high={{item.high}}</p>
    <p>item.low={{item.low}}</p>
  </body>

</html>

Answer №2

Surprisingly, it turned out to be easier than expected.

I simply removed the test for the max value in the first input field as it was unnecessary. Validation was successful and the data is now accurate.

<td><input type="number" class="form-control input-sm" ng-model="item.low" required></td>
<td><input type="number" class="form-control input-sm" ng-model="item.high"  min="{{item.low+1}}" required></td>

Thanks to everyone who offered assistance.

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

Typescript is experiencing an error due to the use of attr("disabled", false) causing a disruption

Within my ts file, I'm using the code snippet below: $('input[type=hidden]').attr("disabled", false); The code functions as intended, however, an error persists: Argument of type 'false' is not assignable to parameter of typ ...

javascripttypescriptinputdisabled-input

What solution can I find for this seemingly persistent issue with Webkit checkbox rendering?

The issue with rendering can be observed at the following link: http://jsfiddle.net/2FZhW/ <input id="box" type="checkbox"> <button id="chk">Check</button> <button id="unchk">Uncheck</button> function check() { $("#box" ...

javascriptjquerycheckboxwebkitprop

Dealing with special characters in ID using jQuery

When constructing an HTML document from a JSON response, the data can vary. The IDs could be anything like: Blue & White Dress Black Dress I attempted to use: $("['id="+dressId+"']").prop('checked', false); However, jQuery is t ...

javascriptjquery

Having trouble with `request.auth.session.set(user_info)` in HapiJS?

I've encountered an issue with my strategy that is defined on a server.register(). Although I followed a tutorial, the code seems to be copied verbatim from it and now it's not functioning as expected. server.auth.strategy('standard&apo ...

javascriptnode.jshapi.js

Basic text deletion script

Trying to find a solution for this problem has been quite the challenge. Despite my efforts in searching and Googling, I have yet to find the perfect answer... Would anyone be able to create a script that can remove all occurrences of <a href="http:// ...

javascripttext

Using React to pass a state value as a parameter in a method

Looking for a way to increase the reusability of my class. Dealing with a large form and don't want to create a unique method for each input. How can I pass the state value as a parameter to the method? I attempted the following approach: state = ...

javascriptreactjsforms

How can I customize the appearance of an iframe using CSS?

Simply put, I've uploaded a video to Google Drive that I want to embed on my website. The embed code I got from the shared-video page for the video is: <iframe src="https://drive.google.com/file/d/0B8DK7pele_HjWUR6Ym9KNFU5YTQ/preview" width="640" ...

javascriptjqueryhtmlcssiframe

Discover how to retrieve service response data from an API and populate it into the Select Option with Angular 2

Api.services.ts getListOfNames() { return this.http.get(this.BaseURL + 'welcome/getnama') .pipe(map(response => { return response; })); } After making the API call, I receive the following resp ...

javascriptangulartypescript

Enhancing Request JSON Body Validation in Next.js 14 API Handler

I'm currently in the process of developing an API for my iOS application using Next.js 14. I have managed to get it up and running successfully, however, I am facing some challenges when it comes to properly validating the body of a request. ESLint is ...

javascripttypescriptnext.js

What is the scope parameter for the facebook-node-sdk in node.js?

https://github.com/amachang/facebook-node-sdk I decided to utilize this module in order to create a Facebook-integrated login for my node.js project, following the example provided with express: var express = require('express'); var Facebook = ...

javascriptfacebooknode.jsexpressfacebook-node-sdk

Tips for accessing jQuery UI tab elements and adjusting visibility for specific panels

How can I retrieve the panel numbers of jQuery UI tabs and adjust their visibility using CSS? I am looking to identify the panel numbers of each tab and control the visibility of certain tabs. <div id="tabs"> <ul> <li><a href="#"> ...

javascriptjquerycssjquery-uijquery-1.10

What could be causing the issue where a POST request from angular.js fails to work, but when sent directly from a form

In my current project, I am implementing basic authentication in node.js with passport.js using the LocalStrategy method. Although password validation has not been incorporated yet, user accounts are being stored in a MongoDB instance. I encountered a maj ...

angularjspostexpresspassport.js

Exploring React: Post-mount DOM Reading Techniques

Within my React component, I am facing the challenge of extracting data from the DOM to be utilized in different parts of my application. It is crucial to store this data in the component's state and also transmit it through Flux by triggering an acti ...

javascriptdomreactjsflux

Develop an interactive AngularJS application with a dynamic Bootstrap table feature

I'm in the process of transitioning my existing jQuery code to AngularJS. One part of the code involves creating a dynamic Bootstrap table based on JSON data retrieved from a Spring REST service. The snippet below shows the jQuery code used to create ...

javascriptjqueryangularjstwitter-bootstrapbootstrap-table

The Postman application is unresponsive and the hashed password has not been created

I am currently attempting to create a hashed password using bcryptjs and then display that password using console.log for easy access and use. For testing my POST request, I am using Postman where my approach involves sending the request body with email a ...

javascriptnode.jsexpressauthenticationpostman

Troubleshooting issues with ember-data's belongsTo relationship

I am facing an issue with the model I have: Whenever I make a call to this.store.find('history'); A request is sent to http:://www.example.com/api/histories/ and I receive the following JSON response: { "tracks":[ { "id":83, ...

javascriptjsonember.jsember-data

Using Zurb Foundation modal instead of Rails confirm causes an error: "Uncaught TypeError: confirmWithReveal is not a function"

I must admit, my skills in javascript are lacking. Please excuse me if I overlook something obvious. My goal is to replace the standard confirm dialog with the Foundation modal dialog. Can anyone guide me on how to implement this correctly on my page? Her ...

javascriptjqueryruby-on-railszurb-foundation-5

The error encountered is due to an invalid assignment on the left-hand side

I'm encountering the error below: Uncaught ReferenceError: Invalid left-hand side in assignment This is the problematic code: if (!oPrismaticMaterial = "") { for (var i = 0; i < oPrismaticMaterial.length; i++) { if (oPrismaticMater ...

javascriptjqueryvalidationvariable-assignment

How to change a CSS 'left' property using Jquery or Javascript

Upon examining my DOM, I found the following element: <div id="itemEditor" class="quoteItemEditorView partType_MATERIAL editMode selectorEnabled" style="left: -1px; right: 0px; width: auto; min-width: 480px; display: block;" > I have b ...

javascriptjquery

Currently in the process of developing an electron application, I encountered an Uncaught Exception error stating: "TypeError: $.ajax is not

I'm currently working on an electron app that interacts with an API endpoint and displays the response on the page. Due to electron's separation of main process and renderer process, I'm using a preload script to facilitate communication bet ...

javascriptjquerynode.jsajaxelectron