Question

Angular v1.57：

有一个问题，当我填写我的选择下拉菜单时，我想验证它。它应该是必需的并且应该选择一个项目。当我在模型中获得一些数据并且它不好时，下拉列表不应该选择任何数据。这是开箱即用的，但它应该使我的选择下拉字段$无效，以便在它周围绘制一个简单的红色边框（使用css）。我的所有输入字段都具有相同的结构。

正如你所看到的，我已经尝试过下面的plnkr，但没有运气。选择下拉字段保持有效，即使没有选择任何内容，但我的模型（$ scope.data.selector）有一个＆＃34; falsy＆＃34;值。

$scope.data = {
    selector: 3
}

当我将模型更改为有效值时，例如：

$scope.data = {
    selector: 2
}

我可以在下拉列表中看到所选的值。但是当有一个＆＃34; falsy＆＃34;值，选择下拉列表应为$ 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"
  }];
});

Answer 1

在您的控制器中使用 $ 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>

Answer 2

你可以添加这个

<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

Answer 3

没有特定方法可以验证没有默认文本的下拉菜单。我已经将这个添加到选择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>

Answer 4

那给我一个理想结果的东西就是（在控制器中）看是否值在选项列表中，如果模型没有任何反应，如果没有使模型的那部分未定义。< / p>

不完美，但有效。

angularjs选择下拉验证

4 个答案: