Question

我的AngularJS表单上有多个下拉列表。当我提交表单时，只有一个下拉列表显示了所需的验证。下拉列表之间的唯一区别是源。在不起作用的那个中，它使用一个对象并设置选项标签和值。在下拉列表中，源是标准维数组。任何人都知道为什么对象源不起作用？

Plunker

<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
  <div style="padding: 10px">
    <select name="TrailerType"
            ng-options="e as e.EquipmentDesc for e in Equipment"
            ng-model="TrailerType"
            required>
    </select>
    <p ng-show="myForm.$submitted">
        <span ng-show="myForm.TrailerType.$error.required">Required</span>
    </p>
  </div>
  <div style="padding: 10px">
    <select name="Hazmat"
            ng-options="h for h in HazmatYN"
            ng-model="Hazmat"
            required>
    </select>
    <p ng-show="myForm.$submitted">
        <span ng-show="myForm.Hazmat.$error.required">Required</span>
    </p>
  </div>
  <button>Sumbit</button>
</form>
</body>

$scope.Equipment = [
  { 'EquipmentDesc': 'Reefer', 'EquipmentId': 1 },
  { 'EquipmentDesc': 'Van', 'EquipmentId': 2 },
  { 'EquipmentDesc': 'Van or Reefer', 'EquipmentId': 3 },
  { 'EquipmentDesc': 'Flatbed', 'EquipmentId': 4 },
  { 'EquipmentDesc': 'StepDeck', 'EquipmentId': 5 },
  { 'EquipmentDesc': 'Removable Goose Neck', 'EquipmentId': 6 },
  { 'EquipmentDesc': 'Double Drop', 'EquipmentId': 11 },
  { 'EquipmentDesc': 'Tanker', 'EquipmentId': 30 },
  { 'EquipmentDesc': 'Rail/IMDL', 'EquipmentId': 34 }
];

$scope.HazmatYN = ['Yes', 'No'];

$scope.TrailerType = {};
$scope.Hazmat = "";

Answer 1

第一次下拉列表时，您的表单名称有误。它应该是“myForm”

<p ng-show="myForm.$submitted">
    <span ng-show="myForm.TrailerType.$error.required">Required</span>
</p>

工作演示：http://plnkr.co/edit/9EF1cJRRmK3rTDmh4cWE?p=preview

下拉的AngularJS验证不起作用

1 个答案: