AngularJS验证在下拉不起作用

我在我的AngularJS窗体上有多个下拉列表。我提交表单时，只有一个下拉列表显示所需的验证。下拉列表之间的唯一区别是来源。在不起作用的一个中，它使用一个对象并设置选项标签和值。在下拉菜单中，源代码是标准的二维数组。任何人都知道为什么对象源不起作用？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 = "";

来源

2017-07-31 ddelella

你的表单名称是错误的，你的第一个下拉。它应该是“myForm”

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

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

来源

2017-07-31 18:55:58 Vivz

你是在正确的我有一个错字实际代码转换到这个问题。我更正了代码并将初始化添加到显示的代码中。问题似乎是控制器中的默认值设置为{}而不是“”。任何想法，为什么这是问题？ – ddelella

什么默认值？我建议你将ng模型绑定到一个对象，例如TrailerType.val，Hazmat .val，并且不要忘记在控制器中初始化你的对象。你会明白为什么在这里使用对象更好的原因https://stackoverflow.com/questions/18128323/if-you-are-not-using-a-dot-in-your-angularjs-models-you-是做错了 – Vivz

这是一个简单的例子，以解决这个问题。在我的实际代码中，我确实将ngModal设置为一个对象。我所指的初始化发生在控制器中，并将对象值设置为{}（参见我提供的代码）。当对象默认设置像这样，所需的HTML验证器不起作用。如果我将它设置为空字符串，它工作正常。只是好奇，如果有一个原因{}不起作用。 – ddelella

AngularJS验证在下拉不起作用

回答

相关问题