angularjs选择下拉验证

Angular v1.57：angularjs选择下拉验证

有一个问题，当我填充我的选择下拉列表我想验证它。应该要求并且应该选择一个项目。当我在我的模型中获取一些数据并且它不好时，下拉列表不应选择任何内容。这种方式是开箱即用的，但它应该使我的选择下拉字段$无效，以便在其周围绘制简单的红色边框（使用CSS）。我所有的输入字段都有相同的结构。你可以看到，我已经用下面的plnkr尝试过了，但没有运气。选择下拉字段保持有效，即使没有选择任何内容，但我的模型（$ scope.data.selector）具有“falsy”值。

$scope.data = { 
    selector: 3 
}

当我改变模型为有效的值，e.g：

$scope.data = { 
    selector: 2 
}

我可以看到，在下拉列表中选择的值。但是当出现“虚假”值时，选择下拉应该是$无效的。我该如何做到这一点（当没有值时，它应该像输入字段一样）。

http://plnkr.co/edit/unmF87anBrm4q8ZguPMp?p=preview

<body ng-app="myApp" ng-controller="MyController"> 
    <form name="testForm" novalidate=""> 
    <label>Select a number</label> 
    <div ng-class="{'has-error': testForm.testList.$invalid}"> 
     <select class="form-control" name="testList" ng-model="data.selector" ng-options="item.value as item.label for item in list" required></select> 
    </div> 

    <label>Input something</label> 
    <div ng-class="{'has-error': testForm.testInput.$invalid}"> 
     <input class="form-control" name="testInput" type="text" ng-model="data.inputor" required /> 
    </div> 
    </form> 
</body>

var myApp = angular.module("myApp", []); 

myApp.controller("MyController", function($scope) { 
    $scope.data = { 
    selector: 3, 
    inputor: "" 
    } 
    $scope.list = [{ 
    value: 1, 
    label: "One" 
    }, { 
    value: 2, 
    label: "Two" 
    }]; 
});

来源

2016-07-18 Anna Smother

嗯，这给了我希望的结果件事，就是看（控制器），如果该值在选项列表，如果它没有发生任何事情的模型，如果不使模型的那部分未定义。

不完美，但它的工作原理。

来源

2016-07-18 15:05:11

您可以添加此

<select class="form-control" name="testList" ng-model="item.value" ng-options="item.value as item.label for item in list" required> 
     <option style="display:none" value=""></option> 
    </select>

看到this以获取更多信息

来源

2016-07-18 13:46:50 nitzanerman

这不会给角度v1.57所需的结果。根据angularjs，所选标签仍然是有效的。 –

有验证的下拉菜单，你不要”没有特别的办法没有默认文本。我已经采取了将此添加到选择div。

ng-class="{'has-error': testForm.testList.$invalid 
    || (testForm.testList.$touched && testForm.testList.$pristine)}"

var myApp = angular.module("myApp", []); 
 

 
myApp.controller("MyController", function ($scope) { 
 
    $scope.data = { 
 
    selector: 3, 
 
    inputor: "" 
 
    } 
 
    $scope.list = [ 
 
    { 
 
     value: 1, 
 
     label: "One" 
 
    }, 
 
    { 
 
     value: 2, 
 
     label: "Two" 
 
    } 
 
    ]; 
 
});

.has-error{ 
 
    border: 1px solid red; 
 
    }

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="MyController"> 
 
    <form name="testForm" novalidate=""> 
 
     <label for='testList'>Select a number</label> 
 
     <div ng-class="{'has-error': testForm.testList.$invalid 
 
     || (testForm.testList.$touched && testForm.testList.$pristine)}"> 
 
     <select class="form-control" id='testList' name="testList" ng-model="data.selector" ng-options="item.value as item.label for item in list" required ng-class=''></select> 
 
     </div> 
 
     <label>Input something</label> 
 
     <div ng-class="{'has-error': testForm.testInput.$invalid}"> 
 
     <input class="form-control" name="testInput" type="text" ng-model="data.inputor" required /> 
 
     </div> 
 
    </form> 
 
    </body>

来源

2016-07-18 13:47:41 Alok

在控制器中使用 $ scope.Form = {};

然后在你的HTML +角码做类似以下

<form name="Form.testForm" role="form" novalidate> 
<label>Select a number</label> 
<div ng-class="{'has-error': Form.testForm.testList.$invalid}"> 
    <select class="form-control" name="testList" ng-model="data.selector" ng-options="item.value as item.label for item in list" required> 
     <option value="">select a value<option> 
    </select> 
    <p ng-if="Form.testForm.testList.$invalid && !Form.testForm.testList.$pristine" class="help-block text-red">field is required.</p> 
</div>

来源

2016-07-18 13:53:38 hafeez

angularjs选择下拉验证

回答

相关问题