你不知道的angularJs内置directive（二）

世态炎凉！！

于 2020-09-29 18:47:08 发布

阅读量1.2k

点赞数 3

分类专栏： AngularJs 文章标签： javascript html html5

本文链接：https://blog.csdn.net/ws9029/article/details/108661570

版权

AngularJs 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

上篇文章讲解了ng-change，ng-checked，ngClassEven，ngClassOdd，ngCopy，ngCut等一些内置指令，下面将继续说下那些不怎么经常用的ng directive，话不多说，直接进入正题！

1.ngForm

作用：这个Directive实例化了一个FormController来负责表单内的页面逻辑（主要是表单验证）

注意：ngForm不能替代，因为它缺少内置的HTML功能。具体来说，你不能ngForm像标签一样提交。这意味着你要用ngSubmit 将数据发送到服务器。

ng默认提供了验证,下面我们来说下有哪些默认验证

一.ng-required(必填验证项)

<input type="text" ng-required="expression"/>

验证表单是否填写，在输入字段上使用指令ng-required,这里说下html的required和ng-required区别，required是始终需要该输入，在 HTML 中，您不能将 required 属性设置为 false（required属性的存在使该元素成为必填元素），ng-required用于是否希望有条件地要求输入，ng-required允许根据boolean来设置required属性

<body>
    <div ng-controller='testController'>
        <ng-form name="myForm">
            单击此处以输入必填字段：
            <input type="checkbox" ng-model="myVar"><br><br>
            myInput:<input name="myInput" ng-model="myInput" ng-required="myVar">
            <h1 ng-if="!myForm.myInput.$valid">myInput输入字段不能为空</h1>
            <br/>
            myInput1:<input name="myInput1" ng-model="myInput1" required>
            <h1 ng-if="!myForm.myInput1.$valid">myInput1输入字段不能为空</h1>
        </ng-form>

    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('testController', ['$scope', function ($scope) {
            $scope.$watch('myVar', function (n) {
                console.log($scope.myForm.myInput);
            });

            $scope.$watch('myInput', function (n) {
                console.log($scope.myForm.myInput);
            });

            $scope.$watch('myInput1', function (n) {
                console.log($scope.myForm.myInput1);
            });
        }])
    </script>
</body>

看下图：
在这里插入图片描述
myInput1是必填字段，当你输入内容后h1标签的提示内容才会消失,看下图

在这里插入图片描述
当你勾选了input checkbox后, myInput才会变成必填项，看下图

当myInput输入内容，提示消失

二.ng-minleng(最小长度)

<input type="text" ng-minlength="5" />

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"

三.ng-maxlength(最大长度)

<input type="text" ng-maxlength="20" />

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"

四.ng-pattern(模式匹配)

<input type="text" ng-pattern="/[a-zA-Z]/" />

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式

五.对url,email,number等进行验证

<input type="email" name="email" ng-model="user.email" /> 
<input type="number" name="age" ng-model="user.age" /> 
<input type="url" name="mary" ng-model="user.web.url" />

在表单元素上添加novalidate标记可以屏蔽浏览器对表单的默认验证行为（不懂H5的验证可以点击这里），下面来看下表单里面有哪些比较重要验证属性

formName.inputName.$pristine：输入是否干净的，布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过
formName.inputName.$dirty:输入是否脏的，布尔值属性，和上面$pristine属性相反
formName.inputName.$valid:输入验证是否通过，布尔型属性，表示表单是否通过验证。如果表单当前通过验证为true
formName.inputName.$invalid:输入验证是否没通过，布尔型属性。和上面$valid属性相反
formName.input.$error:$error对象。它包含当前表单的所有验证内容，以及它们是否合法的信息

下面我们来看下这些属性，先上段代码：

<body>
    <div ng-controller='testController'>
        <ng-form name="myForm">
            require:<input type="text" required name="require" ng-model='require' />
            <br />
            <!-- {{myForm.require}} -->
            <br />
            minlength值5:<input type="text" ng-minlength="5" name="minlength" ng-model='minlength' ng-keyup="test()" />
            <br />
            {{myForm.minlength}}
            <br />
            maxlength值20:<input type="text" ng-maxlength="20" name="maxlength" ng-model='maxlength' />
            <br />
            <!-- {{myForm.maxlength}} -->
            <br />
            pattern值a-z:<input type="text" ng-pattern="/[a-zA-Z]/" name="pattern" ng-model='pattern' />
            <br />
            <!-- {{myForm.pattern}} -->
            <br />
            email:<input type="email" name="email" ng-model='email' />
            <br />
            <!-- {{myForm.email}} -->
            <br />
            number:<input type="number" name="number" ng-model='number' />
            <br />
            <!-- {{myForm.number}} -->
            <br />
            url: <input type="url" name="url" ng-model='url' />
            <br />
            <!-- {{myForm.url}} -->
        </ng-form>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('testController', ['$scope', function ($scope) {
            // $scope.$watch('minlength', function (n) {
            //     console.log($scope.myForm.minlength);
            // })
            $scope.test = function () {
                console.log($scope.myForm.minlength);
            }
        }])
    </script>
</body>