Angular 必需的选择选项不适用于占位符

Question

plunkr here

我有一个默认选择值正确地没有满足所需的验证：

<form name="testForm" novalidate>
  <select ng-model="model.selecter" required ng-options="opt for opt in options">
    <option value="">Select One</option>
  </select>
</form>

$scope.options = [
    'First',
    'Second',
    'Third'
];

当“选择一个”被选中时，testForm.$valid 应该是false。

不过，我也希望能够将占位符添加到选项数组中，但在这种情况下，它会将其标记为有效。

<form name="testForm" novalidate>
  <select ng-model="model.selecter" required ng-options="opt for opt in options">
  </select>
</form>

$scope.options = [
    'Select One',
    'First',
    'Second',
    'Third'
];

$scope.model = { selecter: $scope.options[0] }; // sets the default selected option

这里testForm.$valid 始终是true。有什么方法可以让我的Select One 选项不满足表单的required 状态？

Answer 1

不确定您为什么要尝试使可行的东西复杂化，但是如果必须，您还必须进行一些其他更改。 将您的选择更改为这样

             <select ng-model="model2.selecter" required ng-options="opt.value as opt.label for opt in options2">
             </select>

你的价值观是这样的

      $scope.options2 = [
        {label:'Select One',value:''},
        {label:'First',value:'1'}
      ];

并且不要给你的模型变量一个值。将其设为空白。

         $scope.model2 = { 
            selecter: ''
        };