Angular v1.57:
有一个问题，当我填写我的选择下拉列表时，我想验证它。它应该是必需的，并且应该选择一个项目。当我在我的模型中获得一些数据并且它不好时，下拉菜单不应该选择任何东西。这是开箱即用的，但它应该使我的选择下拉字段 $invalid 以便在它周围绘制一个简单的红色边框(使用 css)。我所有的输入字段都具有相同的结构。
如您所见，我已经在下面的 plnkr 上进行了尝试，但没有成功。选择下拉字段保持有效，即使未选择任何内容，但我的模型($scope.data.selector)具有“假”值。
$scope.data = {
selector: 3
}
当我将模型更改为有效值时，例如:
$scope.data = {
selector: 2
}
我可以看到在下拉列表中选择的值。但是当有一个“falsy”值时，select 下拉应该是$invalid。我怎样才能做到这一点(当没有值时它应该像输入字段一样)。
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"
}];
});
最佳答案
在你的 Controller 中使用 $scope.Form = {};
然后在您的 html+angular 代码中执行如下操作
<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>
关于javascript - angularjs 选择下拉验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38437888/