如何使用angular js验证器执行下拉控制验证?

时间:2016-03-29 12:10:04

标签: javascript angularjs validation angularjs-validation angularjs-forms

我正在进行角度js下拉验证,但在进行下拉列表验证时遇到问题。

我已从本网站获取所有内容并使用此代码: https://github.com/turinggroup/angular-validator

Demo

但是在上面的链接中没有什么比在Dropdwon控件上进行验证的那样。如果有人使用相同的代码进行下拉列表验证,如果成功,那么请指导我。

这是我创建的包括下拉列表的插件:

MyDropdownControlFullDemo

这是我的下拉代码:

     <select class="form-control m-b-sm" required ng-model="form.Obj" ng-options="c.Name for c in Obj track by c.Id">
                 </select>

 $scope.Obj = [
    {Id : '0', Name : 'Select' }, 
        {Id : '1', Name : 'USA' },       
        {Id : '2', Name : 'Canada' },
        {Id : '3', Name : 'Russia' } ];

}

  $scope.Obj = { Id: '0', name: 'Select' };

我想要的是,如果用户没有从下拉列表中选择任何选项,则验证应该出现,就像文本框控件的验证一样。

1 个答案:

答案 0 :(得分:1)

您需要更改代码,如 -

在Html中用于选择列表 -

    <select class="form-control m-b-sm" name="selectbox"  required-message="'Yo! This field is required..'"
                            required ng-model="form.Obj" ng-options="c.Name for c in Objlist track by c.Id">
                  <option value="">Select</option>
</select>

控制器看起来像 -

 angular.module('angular-validator-demo').controller('DemoCtrl',function($scope){

 $scope.Objlist = [
    {Id : '0', Name : 'Select' }, 
        {Id : '1', Name : 'USA' },       
        {Id : '2', Name : 'Canada' },
        {Id : '3', Name : 'Russia' } ];



  $scope.Obj = { Id: '0', name: 'Select' };

    $scope.submitMyForm = function(){
        alert("Form submitted");
    };

    $scope.myCustomValidator = function(text){      
        return true;
    };


    $scope.anotherCustomValidator = function(text){
        if(text === "rainbow"){
            return true;
        }
        else return "type in 'rainbow'";
    };

    $scope.passwordValidator = function(password) {

        if(!password){return;}

        if (password.length < 6) {
            return "Password must be at least " + 6 + " characters long";
        }

        if (!password.match(/[A-Z]/)) {
             return "Password must have at least one capital letter";
        }

        if (!password.match(/[0-9]/)) {
             return "Password must have at least one number";
        }

        return true;
    };



});