【Angularjs】表单标签的验证和使用

1.表单验证
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对应的no-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>