ng-minlength of 2在angularjs中不起作用
在AngularJS中，ng-minlength是一个指令，用于验证输入字段的最小长度。它用于确保用户输入的值满足最小长度要求。
然而，ng-minlength of 2在AngularJS中不起作用可能是由于以下几个原因：
- 错误的指令使用：确保ng-minlength指令正确应用在需要验证的输入字段上。确保指令的语法正确，并且指令名称拼写正确。
- 模型绑定问题：确保ng-model指令正确应用在输入字段上，并且与ng-minlength指令正确关联。ng-model指令用于将输入字段的值绑定到控制器中的变量。确保ng-model指令的值与ng-minlength指令的值正确匹配。
- AngularJS版本问题：ng-minlength指令是AngularJS的内置指令，但它可能在某些版本中存在问题。确保使用的是最新版本的AngularJS，并查看官方文档以了解指令的正确用法。
解决这个问题的一种方法是使用自定义验证器来替代ng-minlength指令。可以在控制器中创建一个自定义验证器函数，然后将其应用到输入字段上。该函数可以检查输入字段的值是否满足最小长度要求，并根据需要返回验证结果。
以下是一个示例代码，演示如何使用自定义验证器来验证最小长度：
在HTML模板中：
<form name="myForm">
<input type="text" name="myInput" ng-model="myInputValue" my-minlength="2">
<span ng-show="myForm.myInput.$error.minlength">输入长度太短。</span>
</form>在控制器中：
app.controller('myController', function($scope) {
$scope.myInputValue = '';
});
app.directive('myMinlength', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
var minlength = parseInt(attrs.myMinlength);
ngModelCtrl.$validators.minlength = function(modelValue, viewValue) {
var value = modelValue || viewValue;
return value.length >= minlength;
};
}
};
});在上述示例中，我们创建了一个名为my-minlength的自定义指令，并将其应用到输入字段上。该指令使用ngModelCtrl.$validators对象来添加一个名为minlength的验证器函数。该函数检查输入字段的值是否满足最小长度要求，并根据需要返回验证结果。
请注意，这只是一个示例代码，用于演示如何使用自定义验证器来验证最小长度。实际应用中，可能需要根据具体需求进行适当的修改和调整。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云原生容器服务 TKE：https://cloud.tencent.com/product/tke
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/baas
- 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
- 腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
相关·内容
我有一个视图，在表行中有一些输入。有没有一种方法可以在不使用form的情况下检查整个模型是否有效( tr中不能有form )？
<tr ng-controller="SomeCtrl">
<td>
<input type="text" ng-model="someModel.name" required="required" ng-minlength="3">
</td>
<td>
<input
浏览 0提问于2014-04-04得票数 1
我对AngularJS有一个UI问题，现在请记住，我使用Angular.js已经2个小时了，而且我以前从未使用过它。我继承了一个项目，我不知道发生了什么.但
我有下列表格项目：
<div><label for="email">email:</label><input type="email" id="email" name="email" required ng-model="user.email" ng-minlength=4></div>
<di
浏览 4提问于2013-09-23得票数 2
回答已采纳
我做错了什么，但看不出是什么。我跟踪了角js文档，验证也不起作用：
<form name="callbackForm" ng-submit="requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" n
浏览 5提问于2016-01-28得票数 1
回答已采纳
为什么这里没有设置错误变量？当输入中没有值时，user.username.$error.minlength不应该是真吗？
<form name="user" ng-submit="submit()">
<div class="input-wrapper">
<input placeholder="Username" ng-model="user.username" ng-minlength="2" ng-maxlength="12"
浏览 0提问于2015-03-24得票数 0
回答已采纳
标准的angularjs验证只起作用：
<form name="myForm"><input name="name" ng-model="name" ng-minlength="10"/></form>
但我不能从我的指令中打开它：
<form name="myForm"><input name="name" ng-model="c.name" dynval /></form>
.directive('
浏览 0提问于2013-09-18得票数 0
回答已采纳
我们再试一次：
下面是一个工作柱塞：
但这些字段是相互连接的。
当您查看DOM时：
<input class="form-control ng-pristine ng-valid-maxlength ng-valid-minlength ng-valid ng-valid-required" type="text" name="fieldName" ng-model="fieldName" ng-minlength="3" ng-maxlength="20" required="
浏览 0提问于2013-12-18得票数 0
回答已采纳
3回答
我有这个使用引导程序的HTML标记
<div class="col-sm-6" ng-app ng-controller="MyController">
<br/><br/>
<div class="input-group">
<input type="text" name="input" class="form-control" ng-model="input" ng-maxlength=&
浏览 5提问于2015-02-27得票数 0
回答已采纳
5回答
Angularjs表单验证命令
、、、、
我有一个简单的html表单，包含常规的文本输入。在输入端设置ng-minlength、ng-maxlength和ng-pattern角。
问题：ng-pattern检查是在ng-minlength和ng-maxlength进行长度检查之前应用的。
问:如何更改默认的检查顺序:即首先检查长度，然后应用模式检查？
示例：
<body ng-app>
<div>
<form name="myForm">
Name: <input name="name" type="te
浏览 3提问于2014-03-19得票数 5
回答已采纳
1回答
我的页面上有四个输入类型数字字段。当使用AngularJS输入了单个数字(最大数字)时，我想将焦点更改为最近的下一个输入。
我是新来的，但我的控制器被风景吸引住了。
<input type="number" ng-model="digit_one" ng-change="digitChange()" ng-maxlength="1" maxlength="1" />
...
digit_two, three and four.
编辑：
每当用户点击"backspace“时，我希望焦点返回到最近的
浏览 2提问于2015-01-04得票数 0
可以强制将ng-minlength设置为条件值吗？例如，我希望用户要么输入正确的中间名，要么什么都不输入：
<input type="text" id="middleName" name="middleName"
ng-model="info.middleName"
ng-minlength="info.middleName ? 2 : 0">
上述语法不起作用。抛出一个“无限循环”错误。
浏览 0提问于2015-10-07得票数 0
1回答
我创建表单并使用AngularJs。我需要显示错误，但我有一个问题。我的ng-show表达式不起作用。
我的代码：
<form name="createProductForm" ng-submit="createProduct(product)" novalidate>
<input type="text" ng-model="product.name" ng-minlength="3" required> <br>
<p ng-show="cre
浏览 30提问于2018-07-31得票数 1
回答已采纳
我正在尝试访问使用验证的表单元素的模型(例如ng-minlength)。在验证通过之前，模型似乎是未定义的。
这是有意为之的行为吗？如何访问无效的模型？
示例：
<div ng-app="myapp">
<form name="myForm">
<input type="text" ng-minlength="5" ng-model="formData.email" required/>
<div>EMAIL length: {{ formD
浏览 3提问于2014-12-17得票数 0
2回答
电话号码验证Angularjs
、、、、
我在验证电话号码时遇到问题。电话号码是一个10位字符串，应在三个输入字段中填充第一个输入字段-只有3个数字(要求，只能接受号码和最大长度3)第二个输入字段-只有3个数字(要求，只能接受号码和最大长度3)第三个输入字段-只有4个数字(要求，只能接受号码和最大长度4)
和制表符应该移动到下一个输入字段，当第一个字段中实现了最大字符数时，当以上条件都不满足时，字段应该是红色的
<label for="phoneone" aria-label="Enter First 3 digits of your phone no."><input id="
浏览 0提问于2015-06-23得票数 0
1回答
我有下面的代码，它给我带来了无意义的痛苦
<input type="text" ng-class="GLOBAL_ERROR == 1 ? 'error-branch' : 'defaulttxt'" ng-model="frm.FirstName" name="FN" ng-required="true" ng-minlength="2" ng-maxlength="100"/>
加载页面时，表单是无效的，因此类在加载数据后为error-
浏览 0提问于2015-10-18得票数 1
1回答
在AngularJS 1.4.7中，我得到了以下问题:除非有效，否则表单不会被填充
<form name="myForm">
<input ng-model="FirstName" name="FirstName" ng-minlength="3">
</form>
在我的控制器里，
angular.module('myApp',['$scope',function ($scope){
$scope.frm={};
}]);
所发生的情况是
浏览 0提问于2015-10-19得票数 0
回答已采纳
我有下面的代码(或者看到)，我尝试重置表单并清除每个表单的所有输入字段。
使用AngularJS版本1.2.1，运行良好！但是在我的应用程序中，我使用的是版本1.5.5，因为我还有其他库来使用需要这个版本的材料框架来分离<md-tab>标记中的嵌套表单。
是指当任何字段都无效时，重置就不能像预期的那样工作，而这些字段则保持不变，以保持清晰。
当我单击“重置”按钮时，还有另一种方法来清除所有字段(嵌套形式)？
angular.module("main", [])
.controller("register", function($scope)
浏览 0提问于2016-10-26得票数 1
回答已采纳
为什么添加额外的AngularJS验证指令会导致$asyncValidators在加载页面时多次运行？
我创建了一个实现$asyncValidators的自定义指令。这是该自定义指令的基本结构：
myApp.directive('userSaved',['$q','userLookup',function($q, userLookup){
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attrs, ctrl
浏览 1提问于2015-07-31得票数 3
回答已采纳
1回答
我正在尝试为ng-minlength和ng-maxlength指令创建一个指令包装器。这些包装器指令的目的是用最大和最小长度填充输入模型，以便能够创建自定义验证消息。我的指令看起来像这样
var directive = angular.module('selfservice.directives', []).directive
directive('minlength', [function() {
return {
restrict: 'A',
require: 'ngModel',
浏览 1提问于2014-11-25得票数 0
我将输入字段定义为
<form name="signUpForm">
<input type="text" name="username" ng-minlength="8" ng-maxlength="64" ng-model="user.username" ng-pattern="/((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^]))/">
</form>
并将控制器中的用户定义为
$scope.user{}
浏览 1提问于2015-08-13得票数 0
3回答
我想使用AngularJS提供的内置表单验证。但是，在表单中，我使用了自定义指令，每个指令都有一个独立的作用域。因此，表单元素无法访问绑定值。
你知道怎么解决这个问题吗？
或者，是否可以在不使用表单的情况下使用AngularJS验证？
ng-minlength和ng-required指令不会触发表单验证。
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" novalidate>
<do-something ng-mo
浏览 0提问于2014-06-23得票数 6
我一直试图创建一个非常简单的指令，用于检查属性my-minlength是否为字符串( null)以及是否为字符串；将属性ng-minlength添加到输入元素中。我觉得这应该管用，但根本行不通。
我的指令
var app = angular.module("fooApplication", [])
app.directive('myMinlength', function() {
return {
link: function(scope, element, attrs) {
if(element == "
浏览 3提问于2014-07-07得票数 1
回答已采纳
我使用
$scope.example = {
word: /^\s*\w*\s*$/
};
<input type="name" name="nameInput" placeholder="Name" required ng-model="nameInput" ng-pattern="example.word" required ng-trim="false" ng-minlength="2">
<
浏览 4提问于2017-03-22得票数 0
回答已采纳
2回答
我想在AngularJs中做一个搜索框的客户端验证。
我尝试了下面的方法，
<form name="search" ng-submit="myFunction()">
<div class="input-group" ng-class="{ error: search.mysearchbox.$invalid }">
<input name="mysearchbox" type="search" cla
浏览 0提问于2014-02-06得票数 1
3回答
对于同一个字段，我有两个验证，一个是触摸的，另一个是在下拉列表更改时触发的。这两个错误消息同时显示，是否有可能在显示另一个错误消息时隐藏错误消息？
<label> First name * </label>
<input type="text" name="fname" ng-model="firstname" class="inversed" ng-minlength="2" ng-maxlength="50" ng-pattern="/^[a-z
浏览 0提问于2016-02-25得票数 1
我正在尝试测试我正在编写的新指令。但是，我似乎无法在Karma/Jasmine中使用jQuery触发keydown事件。
以下是该测试的简化版本：
'use strict';
describe('', function() {
var $compile;
var $scope;
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$scope = _$rootScope_.$new();
}));
describe(
浏览 1提问于2014-01-19得票数 6
回答已采纳
我正在从事一个项目，在这个项目中，AngularJS被大量用于前端。以下是我所拥有的：
我想要的验证规则如下：
Next按钮应该禁用，除非输入的原因是至少有10个字符。
另外，我希望能够告诉用户在提交之前还剩下多少个字符。这将出现在文本区域的右下角。
代码：
<form name="paymentForm">
<div class="form-group" id="Div2">
<select ng-model="selectedPaymentStatus" ng-o
浏览 3提问于2014-06-24得票数 2
回答已采纳
我刚接触angularjs，我需要帮助来找出我做错了什么。我正在使用ngMessages进行表单验证，但是表单提交不起作用。
下面是我的代码：
angular.module("myapp", ["ngMessages"])
p {
color: red;
}
<script src="https://code.angularjs.org/1.7.2/angular.js"></script>
<script src="https://code.angularjs.org/1.7.2/angular-m
浏览 0提问于2018-08-21得票数 0
我有一个例子。
<input type="text" id="openDate" name="openDate" ng-model="ngModel" required="" ng-minlength="1" ng-maxlength="10" ng-pattern="/^[0-9,/]+$/">
当ng-pattern捕获错误时，它将在输入元素上绘制红色。
所以我想捕捉这个错误并显示标题消息："This field be fail format“
浏览 1提问于2014-01-06得票数 3
我是AngularJS的新手。我想为输入设置验证，比如最小长度为5，最大长度为6。
我必须将设置为5到6位数字，只有进入我的文本框。
为此，我使用了下面的代码，但它不起作用。
<div class="input-wrap lg-input">
<input type="text" name="num" class="form-input" placeholder="Enter 5-6 digits" ng-minlength="5" maxlength="6"
浏览 4提问于2016-12-02得票数 1
回答已采纳
3回答
我有一个表单，它在待办事项列表数组中添加项。但是，如果输入字段为空，则我的函数将向数组添加一个空值。
验证表单的最佳方法是什么？
<form name="formaddtodo" ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" ng-minlength="1" size="30"
placeh
浏览 4提问于2017-04-21得票数 0
回答已采纳
以下是我的代码，它对密码工作得很好，但不知何故重新键入密码验证不起作用。让我知道我做错了什么。
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" ng-model="vm.user.password" name="password" required="" ng-minlength="6&
浏览 8提问于2016-01-31得票数 0
我有一个带有“即时”搜索功能的AngularJS 1.7x应用程序，它在延迟500 as之后执行搜索功能，只要至少有3个字符(下面的代码)。
问题是在我执行搜索之后，然后按下重置按钮。所有的重置都应该是这样的，但是当我输入一个新的查询时，ng-minlength就不再被使用了，也就是说，即使我只输入了一个字符，查询函数也会被调用。
由此产生的错误来自这样一个事实，即在第二次(意外)发布时，请求体中的$scope.searchParams.q不再有效。
以下是视图：
<input ng-model="searchQuery" ng-change="query(sea
浏览 3提问于2018-08-25得票数 0
回答已采纳
1回答
我有一个有两个密码输入的表单。
我使用一个指令来验证这两个表单是相同的。
目前，如果您先填写password1，然后填写password2，它就能工作了。
问题:当您填写password1和password2时，它们是相等的，然后更改password1，就不会更新错误消息。我必须再次输入password2才能显示错误消息。
模板
<!-- Password1-->
<div class="form-group"
ng-class="{ 'has-error' : userForm.password.$
浏览 3提问于2017-04-24得票数 1
回答已采纳
我有一个输入字段：
<input type="text" name="title" ng-model="genreData.title" class="form-control"
ng-class="{'error': addGenreForm.title.$invalid && !addGenreForm.title.$pristine}"
placeholder="Genre name" ng-minlength="mi
浏览 3提问于2017-02-02得票数 0
回答已采纳
有没有办法在angularjs中禁用整个div标签？我有一个div标记，其中包含几个表单字段，我只想在一个条件下禁用这些字段。这个是可能的吗？以下是我的代码。我尝试使用，但它不起作用。任何建议都会很有帮助。谢谢，请看下面的代码。我有包含表单的主div标记。我想根据一个条件禁用表单，这样用户就不能输入id和name文本字段。
<div>
<form name="form" role="form" novalidate
class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-va
浏览 5提问于2014-08-29得票数 36
1回答
我用表单编写了一个AngularJS指令。该表单有一个必需的文本字段以及另外两个表单。每个子窗体都有另一个必需的文本字段。
两个子表单的不同之处在于我如何创建它们：
第一个子表单被编译并附加到div中。
第二个子表单直接包含在指令的模板中。
如果第二个子窗体无效，则整个外部窗体无效。这正是我所期望的。但是，如果第一个子窗体(我手动编译的那个)无效，则它对外部父窗体没有影响。为什么？
var app = angular.module('plunker', []);
app.component('generator', {
tem
浏览 4提问于2017-01-19得票数 1
回答已采纳
<label class="item item-input margin5px">
<input type="email" name="email" class="form-control" placeholder="Email" ng-model="user.email" ng-minlength=5 ng-maxlength=100 required>
</label>
我的电子邮件字段中有最小长度、最大长度和所需的验证。如果其中任何一个验证失败，我想添
浏览 3提问于2015-10-22得票数 4
回答已采纳
我想要接收一个表单数据作为一个参数，我不想转换到formdata ()中，并且在操作结果中使用Request.Form，我不能直接接收数据，没有FormData()，下面是我尝试过的.
<form ng-show="divPatient" name="PatientForm" ng-submit="AddUpdatePatient()">
<table>
<tr>
<td>
浏览 2提问于2015-07-10得票数 1
回答已采纳
2回答
我有带车的空模型：
$scope.registration.cars = {
1: {
capacity: '',
count: '',
license: ''
},
2: {
capacity: '',
count: '',
license: ''
}
};
然后我使用ng-重复生成汽车表单：
<div class="row row_vehicles"
浏览 3提问于2017-06-23得票数 0
回答已采纳
我使用了angularJS验证，如ng-required和ng-minLength，并向他们展示了$touched和$invalid true。我已经使用UI路由在幻灯片中显示不同的页面(使用ngAnimate)在单个页面上。当我们单击button在下一张幻灯片上移动时，它会显示下一页的验证消息弹出，如图像所示。它显示页面加载时弹出的验证消息。我在form标签上使用了form，在button上使用了formnovalidate，但是根本不起作用。
<input type="email" class="form-control" placeholder
浏览 3提问于2017-04-16得票数 0
回答已采纳
我创建了一个登录页面，如果用户在输入文本中单击并让他空的话，我会显示错误。
但是，如果用户不单击输入文本并单击登录按钮，则需要显示错误
我的代码：
<form ng-submit="userForm.$valid && submit()" name="userForm" novalidate>
<div class="form-group" ng-class="{ 'has-error': userForm.login.$touched && userForm.log
浏览 7提问于2017-05-13得票数 1
回答已采纳
1回答
我是angular的新手，我输入了一个指令，但它不起作用。我想这是因为我没有写对指令，但我似乎在任何地方都找不到答案。我可以使用指令两次吗？
'use strict';
/* Directives */
angular.module('myApp.directives', []).
directive('appVersion', function (version) {
return function(scope, elm, attrs) {
elm.text(vers
浏览 2提问于2014-01-16得票数 0
1回答
下面是我的密码字段的angularjs代码：
<input type="password" class="form-control" name="password" ng-model="signup.registerPassword" ng-minlength="8" >
<small class="errorMessage" data-ng-show="signupForm.registerPassword.$dirty && signupForm.re
浏览 0提问于2015-08-29得票数 1
回答已采纳
我有这个角度的形状
<ion-nav-buttons side="right">
<a class="button button-icon icon ion-android-done" href="#search/search-form" ng-click="submitNewPublishMessage(msgForm.$valid, msgForm)"></a>
</ion-nav-buttons>
<ion-content>
<
浏览 3提问于2015-09-19得票数 0
回答已采纳
4回答
我在我的主javascript文件中创建了一个角指令。
myApp.directive('mymin', function(){
var func = function(scope, im, attrss, c){
scope.$watch(function(){ return im.attr('ng-minlength') }, function(n){
scope.min = n
})
}
return {link:func, restrict: 'A'}
});
我只想看看"ng-mi
浏览 3提问于2015-07-16得票数 0
回答已采纳
我有一个包含minlength检查的angularjs代码片段。最小长度是2。当我输入像2，3，4,5到9这样的数字时，它会报错ng-length。但是当输入10或11时，它不会抱怨ng-length。下面是带有ng-length检查的输入
<label>Items</label>
<input ng-minlength="2" ng-model="items" name="dInto"
type="number" class="ng
浏览 19提问于2018-07-23得票数 0
回答已采纳
我正在用AngularJS构建一个表单，我注意到了一些我不明白的行为。
当我将ng-minlength=5赋值为输入属性时，AngularJS会解除对该值的绑定，直到其长度超过要求为止。
这对我来说很不方便，因为我想告诉用户他们使用user.lifestory.length输入了多少内容。
为什么AngularJS是这样工作的？当值无效时，如何防止角不绑定？
<label for="lifeStory">Life story:<input name='lifeStory' type="text" ng-model='us
浏览 4提问于2014-07-17得票数 5
回答已采纳
2回答
嗨，我正在创建动态字段并应用验证。但出于某种原因它不起作用。我在输入长字符的字段中擦除数据，但验证不起作用。
<div data-ng-repeat="variant in variants" class="col-md-12 col-sm-12 col-xs-12 form-group">
<label for="text">{{variant.name}}:</label>
<p ng-show="addproductForm.variant_value.$invalid &&
浏览 0提问于2016-12-08得票数 0
回答已采纳
这仍然是我从一位开发人员那里继承项目后使用AngularJS的第一天。我想知道，我的界面上有一个登录/注册表单，一旦提交项目/表单，它就会隐藏起来。现在，一旦用户提交，是否有一种正确或适当的方法来清除其条目的形式，并恢复条目上的.ng-pristine类。这样做的原因是，如果用户选择注销，然后再次登录(或者另一个用户希望注册)，表单就会被填充，并且已经应用了验证css。我不想要这个，我希望所有的东西都是空的，没有CSS应用。
我可以在JavaScript中做到这一点(显然)，但是由于AngularJS是一种不同的方法，我想知道是否应该用另一种方法来解决这个问题，而不是遍历表单项并将类附加到每个
浏览 0提问于2013-09-23得票数 3
回答已采纳
当用户在文本框中输入值时，我想显示文本框的最小值和最大值，如果用户按tab键/将光标从文本框中移动，则消息应为隐藏。
<input type="text"
ng-maxlength="20"
maxlength="20"
ng-minlength="10"
ng-model="value.x">
<p ng-show="value.x">
Please enter above {{minlength}}
浏览 11提问于2018-07-18得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
