Angular's ng-maxlength feature will indicate that a field is invalid if it is left blank, even if it contains any characters

Currently, I am developing a dynamic form using Angular (1.3b17). In my approach, I store the form's schema in an object with various properties defining field behavior like "type" (text, textarea, check, etc) and "maxlength." Subsequently, I assign these properties to angular attributes for the elements based on the corresponding object values (e.g., ng-maxlength="field.maxlength").

An interesting observation came to light which led me to question if this is by design. When I set the attribute without specifying a value (ng-maxlength=""), $error immediately turns true after typing anything as it assumes a maximum length of 0. The same behavior occurs when using an expression (ng-maxlength="field.maxlength") when the property is not defined.

I have provided a simple Plunker for reference. My expectation was that there should be no maxlength checks if the value is not set, even when the attribute is present.

<input id="txtName" ng-model="myval" type="text" name="name" ng-maxlength="" /><br />
{{myForm.name.$error}}

Alternatively,

<input id="txtName" ng-model="myval" type="text" name="name" ng-maxlength="someundefinedvalue" /><br />
{{myForm.name.$error}}

While I could workaround this by setting ng-maxlength to a large value, it does not seem like an ideal solution. Is there a specific rationale for this behavior, or could it possibly be a bug?

Answer №1

It appears that the validator is only applied if you explicitly define the directive on the form control according to this source. This means that the behavior in question has been longstanding and unlikely to change despite possibly being considered a bug.

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

Encountering a 404 error on package.json when utilizing SystemJS with Karma

Issue: I'm facing challenges while trying to incorporate SystemJS config with Karma using the karma-systemjs plugin. Karma is throwing errors indicating that it cannot locate the package.json file for each import: ... 10 07 2017 13:38:15.107:WARN [ ...

Failng to execute ng-submit upon submission

When a user checks out, I need to remove items stored in the cart using localstorage. My goal is to execute this code and then submit the form. // Function to clear the items in the cart shoppingCart.prototype.clearItems = function () { this.items = ...

Obtaining an address using latitudes and longitudes with React Google Maps

I created a map using the react-google-map plugin where users can drag the marker to get the latitude and longitude of a location. However, I am only able to retrieve the lat and lng values and not the address. How can I obtain the address as well? Take a ...

Adding data to the SharePoint RichText Control using the WinForms WebBrowser Control

I am struggling to modify the content of an SP Rich Text field using the WinForms web browser control. While changing the values of other controls is straightforward, I have encountered difficulties with Rich Text fields. I found some suggestions on this b ...

Numerical values are not considered by the JavaScript table filter

I'm having trouble with dynamically filtering the content. It works fine for the first two columns, but not for the third one. Maybe I need some additional JavaScript? Here is the link to my snippet: `https://www.w3schools.com/code/tryit.asp?filen ...

Shadow typing, also known as type over words, is a method where the

I am currently tackling a project focused on language acquisition, including German, Chinese, and more. We are encountering difficulties with one specific feature - the ability to display "ghost" text (in a very faint grey) for users to type over. With th ...

Having trouble with the filtering feature in Material UI Datagrid

I'm currently using Material UI Data Grid to display a table on my website. The grid has an additional filter for each column, but when I click on the filter, it hides behind my Bootstrap Modal. Is there a way to bring it to the front? https://i.stac ...

Ways to address memory leakage issues in Angular

Is there a way to manually optimize the Garbage Collector by forcefully pushing variables into it? For example, if we have a root or global level variable in an Angular component that is no longer needed when switching to another page, how can we ensure it ...

Unable to access a JavaScript array in one file from another file in JavaScript

I am having trouble referencing the arrays I created in a.js and then using them in b.js. The arrays are declared inside a.js $(document).ready(function () { categoryarray = []; productarray = []; In my HTML file, I have the following script tags: < ...

Updating NavBar text dynamically based on user login status in React.JS

Within my project, there is a Navigation bar that I access from App.js. Depending on whether I am logged in or not, I want to display different versions of the NavBar. When logged in, the NavBar should have a logout button. And when logged out, it should s ...

AngularJS offers a decorator to log messages without the need for a debug method

let myApp = angular.module('myApp', []); myApp.config(function($provide) { $provide.decorator( '$log', function( $delegate ){ // Storing the original $log.debug() let debugFunction = ...

Ways to implement a scrollable v-list component using Vuetify

I have set up a v-list using flex layout, where the v-list expands to fill the remaining space horizontally in a column. However, if the list contains many elements with a total height that exceeds the column's height, the list ends up sticking out of ...

Detecting the upcoming click on the document using @HostListener in Angular 4 to dynamically generate a click listener

I'm currently working on a directive that toggles its state when clicked. The desired behavior is for the state to be deactivated if the user clicks anywhere else on the page while it is active. To achieve this, I attempted to use the Renderer2 liste ...

Guide to displaying a component within the Vue instance

I am currently in the process of developing a Nuxt module that will not interfere with the main Nuxt application. My approach involves creating a separate Vue instance and mounting it as a child node under the body element, similar to a child node to the _ ...

Is there a way to prevent users from copying data or switching tasks when using my program or website?

Is it feasible to develop a website or application for Windows desktop machines that can remain focused until the user completes a specific task? For instance, if my YYY app/website is open and I require the user to input some text, I want to restrict the ...

"Exploring the New Features of Bootstrap 5: Button Collapse and

I am struggling to get two buttons working with Bootstrap 5. The first button is supposed to trigger two JavaScript functions to open a bootstrap carousel. The second button is a simple collapse button designed to reveal a long text string. Unfortunately, ...

Creating HTML documents for an AngularJS application using the KeystoneJS content management system

As someone new to AngularJS and KeystoneJS, I am seeking guidance from the community. Any help offered would be greatly appreciated. Thank you all. I have successfully implemented a serving mechanism for my Angular application using Express's express ...

What is the process of memory allocation for variables in Javascript?

Can you explain to me how local variables are allocated memory in JavaScript? In languages like C and C++, local variables are typically stored on the stack. Is this also the case with JavaScript, or are all variables stored in the heap? ...

Using Vuetify 3 to conditionally render v-icon inside a v-data-table

I am struggling to display a v-icon conditionally in a v-data-table within Vuetify 3, based on a value of either 1 or 0. In Vuetify 2, there were multiple easy ways to achieve this, but it's not rendering in the latest version. I want to show v-icons ...

Preventing middleware from continuing execution after the route has ended in Node.js Express

I'm having trouble understanding if I am doing something wrong or if this is just how things work. This is a simple login/register application. I am using middleware to prevent users from accessing the /main page unless they are logged in based on a ...