【AngularJS】总结之中的表单和表单验证

欢迎评论留言交流,如有错误请告知，以免误人子弟

下面大部分是翻译谷歌的，还有自己写的例子

表单验证

1.1结合H5的属性验证

 

Input中的type。

<form name="myform">
    <input type="text" required name="myinputtext" ng-model="myinputtext">
    <apsn ng-show="!myform.myinputtext.$valid">必须输入</apsn>
    <input type="number" required name="myinputnumber" ng-model="myinputnumber">
</form>
<h1>text status is:{{myform.myinputtext.$valid}}</h1>
<!--输出值为bool类型，可以配合ng-show指令来设置验证提示信息-->
<h1>number status is:{{myform.myinputnumber.$valid}}</h1>

 

 

1.2结合CSS样式

这个和一般设置CSS样式，需要注意的是也是需要层级选择和结合你使用的指令

如

<style>
    form .ng-valid{
        background: #5bc0de;
    }
</style>

这个需要你使用$valid

1.3结合自定义指令验证

<script>
    var app = angular.module('app', []);
    app.directive('myDirective', function() {//注意命名中-与大写的对应
        return {
            require: 'ngModel',//ngmodelcontroller
            link: function(scope, element, attr, mCtrl) {//连接一个函数。mCtrl是控制器
                function myValidation(value) {
                    if (value.indexOf("e") > -1) {
                        mCtrl.$setValidity('1',true);//设置有效，第一个参数是验证器的名字。第二个是bool类型，当前值是否有效
                    } else {
                        mCtrl.$setValidity('1',false);
                    }
                    return value;
                }
                mCtrl.$parsers.push(myValidation);//将函数加入控制器中，在输入值改变时调用。
            }
        };
    });
</script>

 

2.表单中不同的type对应的ng-model值

 

 

Checkbox: ng-model=””//bool

Radio://数据会绑定input的value

多选：这个比较特别

<form action="" >
    <select name="" id="" ng-model="selval">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>

    </select>
</form>
<h1>{{selval}}</h1>
<script>
    var app = angular.module("app",[]);

</script>