AngularJS 中的ngMaxlength 指令将 maxlength 验证器添加到ngModel。该指令主要用于控制基于文本的输入,但也可用于控制自定义的基于文本的控件。
如果值ngModel.$viewValue长于通过评估 ngMaxlength 属性值中定义的 Angular JS 表达式获得的整数值,则此验证器设置maxlength错误键。
<element ng-maxlength="expression">..content..</element>
在您的 Angular 项目目录中创建一个文件“ngMaxlength.html”并复制粘贴以下代码片段。
<!DOCTYPE html> <html> <head> <title>ngMaxlength Directive</title> <script xx_src="https://cdn.staticfile.org/angularjs/1.6.9/angular.min.js"></script> </head> <body ng-app="app" style="text-align: center;"> <h1 style="color: green;"> Welcome to nhooo.com </h1> <h2> AngularJS | ngMaxlength Directive </h2> <div ng-controller="demo"> <form name="form"> <label for="maxlength">Input the text maxlength: </label> <input type="number" ng-model="maxlength" id="maxlength" /> <br /> <label for="input">This input is restricted by the current maxlength: </label> <input type="text" ng-model="model" id="input" name="input" ng-maxlength="maxlength" /><br /> <br /> input valid? = <code>{{form.input.$valid}}</code><br /> model = <code>{{model}}</code> </form> </div> <script> angular.module("app", []).controller("demo", [ "$scope", function ($scope) { $scope.maxlength = 5; }, ]); </script> </body> </html>输出结果
要运行上述代码,只需转到您的文件并将其作为普通 HTML 文件运行即可。
观察输出,当输入的文本长度大于maxlength时,输入无效。
<video "="" controls="" xx_src="https://www.nhooo.com/assets/questions/media/57432/3926468-1633689087.mp4">您的浏览器不支持 HTML5 视频。