Using the input type 'number' will result in null values instead of characters

My goal is to validate a number input field using Angular2:

<input type="number" class="form-control" name="foo" id="foo"
       [min]="0" [max]="42" [(ngModel)]="foo" formControlName="foo">

In Chrome, everything works perfectly because it ignores characters as input, triggering the required validation when necessary. However, Firefox allows users to input characters into the field, leading to issues with the required validation. This results in problems like this:

https://i.stack.imgur.com/0oABN.png

The Issue

I want to be able to differentiate between empty values and invalid patterns. The only solution I have found so far is to change the input type to text and use a pattern validator. This way, even if there are characters in the input, they won't trigger the validation for number.

  • Is there a way to access the actual value of the field using the Angular2 FormGroup object (even 

    document.querySelector('#foo').value
    returns null despite the input showing something like 42bar)?

  • Alternatively, is there a method to check if the input field contains characters?

  • Or should I stick to using input type="text" as the best option?

javascriptvalidationangulartypescript

Answer №1

When inputting a non-number into a "number" field, the value will be set to null. This behavior is intentional and defines how the input should operate.

To determine if the field contains a valid value, you can reference the .validity.valid flag. In the case of number fields, an empty value is considered valid.

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

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...

javascripthtmlcssflexslider

The p5.play library does not function properly on repl.it

I've recently started using p5.play, but I keep encountering this error whenever I try to run a program (I'm using repl.it); p5 is having issues creating the global function "Animation", possibly because your code already uses that name as a va ...

javascriptp5.js

Display the jQuery validation message in the final td cell of the table

JavaScript Animation Library rules:{ gender: { required: true }, }, messages:{ gender: { required: "Please indicate your gender" }, }, errorPlacement: function (error, element) { if (element.attr("type") == "radio") { ...

javascriptjqueryhtml

Searching for a specific element in jQuery by querying a string

I have a situation where an ajax request is made to send text using the POST method to another PHP page. This PHP page then converts the text into markdown format and sends it back. Here's an example of what it looks like: "<p>Meep, meep, <e ...

javascriptphpjqueryajaxmarkdown

An object rotating in a loop with Three.js will not cast a shadow over the entire scene

Why are some cubes in my loop not casting shadows? Despite using a directional light that should cast shadows on all cubes, the shadowing stops after around 5 columns. let dirLight = new THREE.DirectionalLight(0xFFFFFF, 1.5); dirLight.position.set(300, - ...

javascriptloopsthree.jsshadowlight

Looking for a way to locate any elements in jQuery that do not contain a certain CSS class?

I am looking to target all form elements that do not contain a specific CSS class. For example: <form> <div> <input type="text" class="good"/> <input type="text" class="good"/> <input type="text" class="bad"/> ...

javascriptjquery

Updating the background color of the side menu in Ionic 4

Wanting to customize the background color of the side sliding menu in my ionic 4 project Here is the code I am using: <ion-app> <ion-split-pane> <ion-menu> <ion-header> <ion-toolbar color="medium"> ...

angularionic-frameworkionic4

Incorporating Bloodhound into an Angular 2 CLI project

I have been working on integrating Bloodhound.js into an Angular 2 project that utilizes Angular 2 CLI. Currently, I have successfully implemented jQuery by following these steps: Installed jQuery using npm install jquery --save Installed jQuery Type ...

jqueryangulartypeaheadbloodhound

The image fails to load after I moved the routers from the server file (entry point file) to the controller file

I recently made the decision to transition two routers from my server file to my controller file in order to adhere to the MVC format. However, after making this change, I realized that the logo image is no longer visible on those routers. It seems like al ...

javascriptnode.jsexpress

Do specific elements of typography adjust according to the size of the window?

I'm always amazed by the creative solutions that come out of this community. So I'm reaching out to see if anyone knows a way to achieve something unique with CSS! Specifically, I'm curious if it's possible to make certain horizontal p ...

javascripthtmlcsstypography

Is it possible to use takeUntil() with an Observable of type void?

The information provided states that the takeUntil function will continue emitting values until the passed observable emits a value, rather than until subscribe is called. I am curious about whether the following approach is considered safe: const x = ne ...

angularrxjsobservable

Using Ajax and jQuery to dynamically insert an option into a datalist

I'm in the process of building a search box using Flask, MySQL, and ajax. I've managed to retrieve the search results in JSON format within the console, but now I want to dynamically add them to the options in my datalist element in the HTML. He ...

javascripthtmljqueryjsonajax

Tips on retrieving values from input files using jQuery

Is there a way to retrieve the value of an input type using jQuery? Specifically, when I add a file to the input file, I want to dynamically add more input types with the file's value. Currently, I am using the following code: $('#show_input&apo ...

javascriptjqueryhtml

Compiling Typescript tasks in Visual Studio Code - ensuring output encoding is set correctly

Have you tried manually setting up a typescript compilation task in Visual Studio Code? You can find detailed instructions at this link. When you run the build command (Ctrl+Shift+B), are you seeing an error message from tsc with unknown encoding? Check o ...

typescriptvisual-studio-codetsc

Instructions for adding a class when a li is clicked and replacing the previous class on any other li in Vue 2

Even though I successfully used jQuery within a Vue method to achieve this task, I am still searching for a pure Vue solution. My goal is to remove a class from one list item and then add the same class to the clicked list item. Below is the code snippet w ...

javascriptvue.jsvuejs2

What is the JavaScript method for updating an HTML5 datalist to show new options?

When populating options dynamically into an HTML5 datalist, I'm facing an issue where the browser tries to display the datalist before all the options have loaded. As a result, the list either does not show up completely or only partially shows up. Is ...

javascriptjqueryajaxhtmlhtml-datalist

Angular allows for dynamic sourcing of iframes

I have encountered an issue while trying to integrate a payment system with Angular. The payment gateway API I am using provides the 3D Secure Page as html within a JSON response. My approach is to display this html content within an iframe, however, the h ...

javascriptangular

Ways to retrieve "this" while utilizing a service for handling HTTP response errors

I have a basic notification system in place: @Injectable({ providedIn: 'root', }) export class NotificationService { constructor(private snackBar: MatSnackBar) {} public showNotification(message: string, style: string = 'success' ...

javascriptangulartypescript

Transform array sequences into their own unique sequences

Reorder Array of List to Fit My Custom Order Current Output: [ { "key": "DG Power Output", "value": "6.00", "unit": "kWh", }, { "key": "DG Run Time", "value": "5999999952", "unit": "minutes", }, { "key": "Fuel Level (Before)", "value": "8.00" ...

javascriptarraysangulartypescriptsorting

Unexpected "<" and dual output in jade include seem to defy explanation

i am currently redesigning my website to incorporate dynamic includes. These includes are pre-rendered on the server and then passed to res.render() however, I am encountering unexpected occurrences of < and > on the page, along with the issue of th ...

javascriptnode.jsexpressincludepug