angularjs 表单内置验证指令

此表单示例结合先前的自定义指令弹窗使用，使用场景为新建，修改；主要使用表单验证的内置指令，如果有验证不通过，表单将不会提交。

demo：

html 代码：使用anguljs 表单验证的内置指令

<form name="userGroupForm" ng-submit="$ctrl.submit($event,userGroupForm)" novalidate>
    <div class="modal-header" ng-if="$ctrl.resolve.title">
        <button type="button" class="close" ng-click="$ctrl.dismiss()">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" ng-bind="$ctrl.resolve.title"></h4>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label class="control-label" for="name">用户组名</label>
            <input class="form-control" ng-model="$ctrl.resolve.data.name" name="name" type="text" autocomplete="off" autofocus="autofocus" ng-maxlength="18" required>
            <span class="help-block">可输入汉字、英文字母、数字、下划线和英文点，最多输入18个字符</span>
            <div ng-show="userGroupForm.$submitted && userGroupForm.name.$error.required" class="help-block">请输入群组名</div>
            <div ng-show="userGroupForm.$submitted && userGroupForm.name.$error.maxlength" class="help-block">不能多于18个字符</div>
            <div ng-show="" class="help-block">已存在该群组</div>
        </div>
        <div class="form-group">
            <label class="control-label" for="password">密码</label> 
            <input class="form-control" name="password" ng-model="password" type="password" autocomplete="new-password" required>
            <div ng-show="userGroupForm.$submitted && userGroupForm.password.$error.required" class="help-block">请输入密码</div>
        </div>
        <div class="form-group">
            <label class="control-label" for="checkPassword">确认密码</label> 
            <input id="checkPassword" class="form-control" name="checkPassword" ng-model="checkPassword" type="password" required>
            <div ng-show="userGroupForm.$submitted && userGroupForm.checkPassword.$error.required" class="help-block">请再次输入密码</div>
            <div ng-show="userGroupForm.$submitted && password!=checkPassword" class="help-block">两次密码输入不一致</div>
        </div>
        <div class="form-group">
            <label class="control-label" for="descr">描述</label>
            <textarea class="form-control" ng-model="$ctrl.resolve.data.descr" name="descr" ng-maxlength="200"></textarea>
            <div ng-show="userGroupForm.$submitted && userGroupForm.descr.$error.maxlength" class="help-block">不能多于200个字符</div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="submit">提交</button>
        <button class="btn btn-default" type="button" ng-click="$ctrl.dismiss();">取消</button>
    </div>
</form>

 js 代码：使用ng-submit() 方法提交后，组件中处理

angular.module('user-groups').component('userGroupsForm', {
    templateUrl:'user-groups/form/template.html',
    controller:['$state',function($state){
        var instance = this;
        this.submit = function(event,form){
            //表单验证通过时执行
            if(form.$valid){
                //以form-data 形式提交表单，不使用原本的json 格式提交
                console.log($(event.target).serialize());
                
                /* 将上面的表单参数提交到后台 */
                
                //关闭弹窗
                instance.close();
                //重载当前状态，显示操作后的列表
                $state.reload($state.current.name);
            };
        };
    }],
    bindings:{
        resolve:'<',
        close:'&',
        dismiss:'&'
    }
});

 

表单验证的状态

• $invalid：表示表单元素的验证（如required、ng-minlength等）处于invalid状态。
• $valid：与$invalid相反的状态，表示表单元素的验证正确，处于valid状态。
• $pristine：表示表单元素未曾输入过值，处于全新的状态。
• $dirty：与$pristine相反，表示表单元素已经输入过值，处于dirty状态。
• $error：表示表单元素输入的值不符合验证，处于error的状态。

 

表单内置验证指令

• required：表示该元素是必须的。
• ng-required：该指令与required最大的区别是，它可以通过传入Boolean值来设置表单元素是否为required。
• ng-minlength：设置表单元素的最小值。
• ng-maxlength：设置表单元素的最大值。
• ng-pattern：可以通过传入正则表达式对表单进行验证。