Transforming the format of numbers in an angular material input field

Within my angular-material application, I have a validation field:

<input type="number" ng-model="myValue"
       name="myValue" 
       min="0" max="100" 
       ng-pattern="/^[0-9]\d*(\.\d+)?$/" required>

Initially, it functions correctly. However, I now require the ability for users to input .75 and have it display as 0.75 instead.

The question is how can I implement this filter:

if( myValue.substring(0,1) == "." ){
    myValue = "0" + myValue;
}

Prior to applying angular material's ng-pattern and type="number" validations.

javascriptangularjsangular-material

Answer №1

Implementing a directive with the use of $filter, $formatters, and $parsers allows you to manipulate data:

app.directive('parser', ['$filter',
    function($filter) {
        return {
            restrict:'A',
            require: 'ngModel',
            link: function(scope, element, attrs, ctrl) {

                ctrl.$formatters.unshift(function (a) {
                return $filter('myFilter')(ctrl.$modelValue)
            });

             ctrl.$parsers.unshift(function (viewValue) {
             element[0].value = $filter('myFilter')(element[0].value);
             return element[0].value;
            });
            }
        };
    }
]);

app.filter('myFilter', [
    function() {
        return function(input) {

           if( input && input.substring(0,1) == "." ){
             input = "0" + input;
           }
            return input;
        };
    }
]);

DEMO Plunkr

It's worth noting that using type number may not be suitable due to issues with parsing integers containing a dot.

Hopefully, this provides some direction for your implementation.

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

Hover over a ListItem

Looking for advice on how to incorporate a Mouseover feature into a Material UI ListItem from the following link: http://www.material-ui.com/#/components/list. As the "SecondaryText" is limited to 2 lines, I am exploring options to display additional data ...

javascriptreactjsmaterial-ui

Adding a sphere object to the periodic table in Three.js css3d

After recently diving into the world of Three.js, I've been playing around with the css3d - periodic table demo. As I tinker with the demo, I find myself wanting to add an additional sphere object to the center of the sphere periodic table. However, I ...

javascriptthree.js

The issue I am facing involves a 404 not found axios error when attempting to send a post request

I am attempting to send data via a post request from react.js to express.js using axios, but I keep encountering a 404 not found axios error. You can view the error image here. Below is my code: export default function Upload() { const [state, setState ...

javascriptnode.jsreactjsexpressmern

Tips for eliminating the "Your connection is not secure" page in Firefox when using "Selenium with JavaScript"

My current project involves automating a secure URL using Selenium, WebdriverIO, and JavaScript. However, the page keeps redirecting to a "Your connection is not secure" message. I have attempted to address this issue by setting various preferences in the ...

javascriptseleniumfirefoxselenium-webdriverwebdriver-io

Why won't my redux application store the results of an asynchronous API request using redux-thunk's caching mechanism?

I am new to using Redux in my project. Currently, I am developing an application that displays a list of soccer leagues in each country. The process involves fetching a list of countries first, then using the country names to fetch the soccer leagues. Not ...

javascriptreactjsreduxredux-thunk

Encountering a "MissingSchemaError" while attempting to populate the database with mongoose-seeder

I am facing an issue while trying to populate a database using mongoose-seeder. Despite setting up the schema correctly, I keep encountering a MissingSchemaError which has left me puzzled. Here is a snippet from the file where I define the schema: const m ...

javascriptnode.jsmongodbexpressmongoose

retrieve a string value from a function within a ReactJS component

I am facing an issue with returning a string from a function. Here is the function I am using: const getImage = (name) => { const imageRef = ref(storage, name); getDownloadURL(imageRef).then((url) => { return url; }); }; Even tho ...

javascriptreactjsfirebase-storage

Preventing conflicts while toggling visibility with JQuery across various groups

My navigation system allows me to show/hide divs and toggle an 'active' class on the navigation items. However, I've encountered conflicts when trying to use similar sections on the same page (clicking a link in one section affects divs in o ...

javascriptjqueryhtml

Designing a Unique Shader with Three.js

Please be aware that a lot of the code has changed as per edit 3 below. I came across a blog post by Brandon Jones (link here) that I really liked. I wanted to convert his code to Three.js, but I'm encountering some difficulties. You can access his c ...

javascriptshaderwebglthree.js

When utilizing the dojox.grid.enhanceGrid function to delete a row, the deletion will be reflected on the server side but

I have a grid called unitsGrid that is functioning correctly. I am able to add and delete rows, but the issue arises when I try to delete rows - they do not disappear from my unitsGrid. I have spent hours trying to debug the code but I cannot seem to fin ...

javascriptdatagriddojo

Zoom in on a canvas-inserted image by clicking it, using a snippet of jQuery and HTML5

I'm currently working on a canvas image that allows zooming in and out after clicking the control button. The original size of the red ball is 128x128px. However, when zooming in too much, the image gets clipped by its own container. How can I resolv ...

javascriptjqueryhtml

Can directives cease to function properly when they are nested within one another?

Having some trouble nesting directives in my examples. It seems like I have everything needed, but it's not working as expected. Oddly enough, when I move the nested directive outside of the parent directive, it works fine. Take a look at this pl ...

angularjsdirective

The function domElement.addEventListener in TrackballControls.js appears to be missing and is causing an error

Encountering an issue with TrackballControls.js: the error "this.domElement.addEventListener is not a function" keeps popping up This problem arises when I try to link the TrackballControls to a DOM element: // 'container' represents a variabl ...

javascriptthree.js

Using Angular.js to Make a $http.get Request from a Different Controller

I am utilizing an HTTP resource that provides a JSON list of top 10 entities from a database by calling it in this manner: var filter= "john"; var myApp = angular.module('myApp', []); myApp.controller('SearchController', [&apo ...

javascriptangularjsangularjs-scope

Utilizing AngularJS for Managing JSON Data

I'm facing a new challenge and need some assistance. My goal is to create 9 buttons and a panel that will display movie details based on the button clicked. For example, if I click 'Transformers', I want the panel to show details about Trans ...

javascriptarraysjsonangularjsangularjs-ng-repeat

Issues with the execution of Jquery function

Hey guys, take a look at my code: //Additional Jquery codes // display_popup_crop : revealing the crop popup function display_popup_crop(link) { alert("show_popup_crop function is triggered!"); // changing the photo source $('#cropbox&a ...

javascriptphpjqueryhtmljcrop

Utilizing npm scripts to compress all HTML files within a directory, including its subdirectories

I am looking for a way to compress all the files with a .html extension in a particular folder, including any subfolders, using a script called npm run. Ideally, I would like the original .html files to be replaced with the minified versions, but creating ...

javascriptnode.jsnpmpackage.json

What is the best way to retrieve IMDB movie data using AJAX?

I have created a code to access movie information from IMDB. To download free movies, you can visit my website . To obtain series of movie information, I need to utilize the IMDB API. However, the current code I am using refreshes the page and posts the a ...

javascriptphpjqueryajax

Can I identify the gender of visitors to my blogger.com website?

Is there a way to customize content based on the gender of the visitor using JavaScript or other methods like an AJAX call to an external server with Python/Ruby backend for GData APIs access, or by retrieving cookie information? Google, for instance, ca ...

javascriptajaxcookiesbloggervisitor-pattern

AngularJS using the ng-controller directive

I am presenting the following HTML code excerpt... <!DOCTYPE html> <html lang="en-US" ng-app> <head> <title>priklad00007</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angula ...

javascripthtmlangularjs