【Angularjs文档翻译及实例】表单指令集（input）

reclay 发布于2019-08-19 17:43 / 1046人阅读

摘要：设置了属性，清空一下内容查看效果设置了属性，增加内容查看效果运行效果以及用法其中以及请参照的参数列表，下面，仅列出与上个控件不同的参数。

最近在看Angular的知识，无论是书中还是网上，讲解跟表单有关的指令集都是点到为止，讲些基础验证，比如，是否为空，是否为email地址，更多的并没有讲解，但是，当我查看Angular的官方文档时，发现与input控件相关的指令集真的很丰富，有关HTML5新增的控件也有很多，所以，我试着将input相关的指令集部分的英文文档再加上自己的理解翻译了一下，如果有不当的地方还希望各位看观指正。

Angular真的很强大，强大的让人眼前一亮。

约定

参数名会使用驼峰式书写。例如ngShow，此参数用在控件的属性时，属性名为：ng-show。以此为约定。

input

用法

...

参数说明

参数	类型	详情
ngModel	string	改选参数，用于数据绑定
name(optional)	string	控件自定义名称，运行期间可使用些名称控制控件
required(optional)	string	如果添加此属性，并且内容为空，则设置$error.required为true
ngRequired(optional)	boolean	如果必填，则此属性设置为true
ngMinlength(optional)	number	如果输入的长度小于此值，就会设置$error.min为true
ngMaxlength(optional)	number	如果输入的长度大于此值，就会设置$error.max为true。如果此值设置为负数或者非数值，则表示可输入任意长度。
ngPattern(optional)	string	如果此属性中的表达式不能匹配输入的值，就会设置$error.pattern为true。如果表达式为RegExp对象，那么就会直接使用。如果表达式是一个字符串，那么Angular会在字符串外层增加^和$。比如，"abc"将会转换为new RegExp("^abc&")。
ngChange(optional)	string	onChange事件绑定
ngTrim(optional)	boolean	如果为false，不会修剪输入。如果输入框的类型为password，此属性无作用。默认是true

小贴士：记得，在使用$error时，要使用控件的name值作为变量，不应该使用ngModel值作为变量。

下面的代码分别演示了required和ngMinlength属性的用法，以及$error的实际应用。

请注意ngShow中的内容，使用的变量全部是name属性的值。


    
        input1 is empty.
        input2 is must longer than 5
        
            input1:(设置了required属性，清空一下内容查看效果)
            
        
        
            input2:(设置了ngMinlength属性，增加内容查看效果)
            
        
        form.txt1.$error.required:{{form.txt1.$error.required}}
        

        form.txt2.$error.minlength:{{form.txt2.$error.minlength}}

var app = angular.module("myapp", []);

app.controller("inputCtrl", function($scope) {
    $scope.input1 = "required";
    $scope.input2 = "min";
});

运行效果：https://jsfiddle.net/Lionney/my2ht8fx/

input[checkbox]、input[date]以及input[datetime-local]

input[checkbox]用法

其中ngMode、name以及ngChange请参照input的参数列表，下面，仅列出与上个控件不同的参数。

参数说明

参数	类型	详情
ngTrueValue(optional)	expression	当选择框为选中状态时，则返回此属性中的值。此属性内容默认为表达式，所以，如果是字符型数据，则要在外面使用"包含起来。比如：ng-true-value=""abc"",否则会按表达式处理。
ngFalseValue(optional)	expression	当选择框为未选中状态时，则返回此属性中值。其余同上。

input[date]用法

其中ngMode、name、required、ngRequired以及ngChange请参照input的参数列表，下面，仅列出与input控件不同的参数。

参数说明

参数	类型	详情
min(optional)	string	日期选择器是HTML5中新加的表单控件类型，此属性是为了设置控件最小可选择的日期。这个属性必须使用ISO日期字符串（yyyy-MM-dd）格式。当然，也可以插入变量（详见注释1）。如果不符合此属性设置的最小值，则会设置$error.min为true。
max(optional)	string	此属性为设置日期控制所能选择的最大日期。其它与上一参数相同。如果不符合此属性设置的最小值，则会设置$error.max为true。
ngMin(optional)	datestring	此为angular的属性，设置后，不会影响控件的最小可选择日期，如果用户选择填写的与属性不符，则会设置$error.min为true。属性设置方法与min参数相同
ngMax(optional)	datestring	此为angular的属性，设置后，不会影响控件的最大可选择日期，如果用户选择填写的与属性不符，则会设置$error.max为true。属性设置方法与max参数相同

注释1：min="{{minDate | date:"yyyy-MM-dd"}}"

input[datetime-local]用法

此控件与date控件一样，只是在设置min、max、ngMin、ngMax属性时，内容有所不同，因为此控件是选择日期及时间，所以设置的时候要加上时间，格式依然要使用ISO规定的日期时间格式（yyyy-MM-ddTHH:mm:ss），当使用日期过滤器时，格式化为："{{maxDatetimeLocal | date:"yyyy-MM-ddTHH:mm:ss"}}"

其它的参数说明与date是一样，可以参照date参数说明。

下面实例为使用了以上控件的综合实例，代码如下：


    
        选择1
        

        选择2
        

        
        min validate error.
        

        
        min validate error.
        

        ck={{ck1}}
        

        ck={{ck2}}
        

        dd={{dd}}
        

        dl={{dl}}

var app = angular.module("checkbox", []);

app.controller("ckCtrl", function($scope) {
    $scope.ck1 = true;
    $scope.ck2 = 7
    $scope.dd = new Date("2017-01-01");
    $scope.dl = new Date("2017-01-01 08:08:00");
});

程序说明

当使用$error时，必须同时设置控件的name与ngModel属性，使用name属性值做为变量，否则，程序将达不到验证效果。验证的提示信息也必须放在form表单中，见代码中带有ngShow部分内容。

checkbox的初始化有两种方式，第一种即此代码中所展示的ck1。如果没有设置ngTureValue/ngFalseValue的话，可以直接赋值true/false。第二种为此代码中所展示的ck2。如果设置了ngTureValue/ngFalseValue，那么要使用ngTureValue/ngFalseValue中的值来初始化选择框状态。

运行效果https://jsfiddle.net/Lionney/snojqoqy/

云服务器 GPU云服务器指令集 python 指令集 form表单提交input 云服务器指令集

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78793.html

【Angularjs文档翻译及实例】DOM事件

摘要：把当中涉及事件的属性整理一下，此文档是基于英文文档整理的。约定此文中表示属性名。用法参数参数类型详情提交表单时，表达式被触发事件对象与一样可获得综合实例代码代码地址如有问题，请指正。把Angularjs当中涉及DOM事件的属性整理一下，此文档是基于1.4.8英文文档整理的。约定：此文中ngXxx表示ng-xxx属性名。 ngBlur 用法 ... 参数参数类型详情 ...

awesome23 2019-08-19 17:44 评论0 收藏0
AngularJs功能（六）--指令

摘要：事件只针对输入框值的真实修改，而不是通过来修改。指令将给定表达式的值替换元素的内容。指令还有另外一种转换方式，如果你有字符串数组希望在输入框中显示，你可以在上使用指令。指令 Directive 指令系统（Directive）是Angular应用的一个重要特性。是通过对DOM元素的标签丶属性来增强HTML表现力，为其增加一些特定功能。本篇参考文档Angular菜鸟教程内置指令这里...

Mertens 2019-08-22 13:59 评论0 收藏0
总结的AngularJS1版本的一些面试问题

摘要：综上所述两者是出于不同的目的被创建的，解决的也是不同的问题。检测模型变化的过程称为循环。由指令注册的事件处理函数执行。该回调函数会更新插值表达式所在的属性。模块主要关系脚本加载问题。 AngularJS面试题 1.与jQuery的比较 jQuery js函数库封装简化dom操作使用jquery的思想是：我拥有一个DOM元素并且想让它去做某件事。也就是命令式编程思想。 angula...

defcon 2019-08-21 16:18 评论0 收藏0
AngularJS表单验证

摘要：表单和其中的表单控件提供了验证服务，可以让用户在提交一般在点击类型为的按钮时提交表单前意识到自己有非法不符合要求，以下都将称为非法的输入。为了编写一个可靠的应用程序，服务端验证是不可或缺的。促发条件至于自定义表单验证，我会另写一篇。表单网页中用户于服务端交互数据的表单控件有input、select、textarea，而表单是将为了达到一个目的（登录、注册等）各种控件整合到一起的一个...

shenhualong 2019-08-02 15:55 评论0 收藏0
AngularJS表单验证

摘要：表单和其中的表单控件提供了验证服务，可以让用户在提交一般在点击类型为的按钮时提交表单前意识到自己有非法不符合要求，以下都将称为非法的输入。为了编写一个可靠的应用程序，服务端验证是不可或缺的。促发条件至于自定义表单验证，我会另写一篇。表单网页中用户于服务端交互数据的表单控件有input、select、textarea，而表单是将为了达到一个目的（登录、注册等）各种控件整合到一起的一个...

zorpan 2019-08-30 13:05 评论0 收藏0