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驗證在下拉不起作用

回答

相關問題