2

I have multiple drop down lists on my AngularJS form. Only one of the drop down lists is showing the required validation when I submit the form. The only difference between drop down lists is the source. In the one which does not work it uses an object and sets the option label and values. In the drop down which works the source is a standard dimensional array. Anyone know why the object source does not work?

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 = "";
ddelella
  • 67
  • 1
  • 7

1 Answers1

0

Your form name is wrong for your first dropdown. It should be "myForm"

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

Working Demo :http://plnkr.co/edit/9EF1cJRRmK3rTDmh4cWE?p=preview

Vivz
  • 6,625
  • 2
  • 17
  • 33
  • You were correct in that I had a typo converting actual code to this question. I corrected the code and added the initialization to the code displayed. The problem appears to be that the default value in the controller is set to {} and not "". Any ideas why this is the issue? – ddelella Jul 31 '17 at 19:12
  • The default value for what? I would suggest that you bind your ng-model to an object , for example TrailerType.val , Hazmat .val and don't forget to initialize your object in the controller. You will understand the reason why it is better to use an object here https://stackoverflow.com/questions/18128323/if-you-are-not-using-a-dot-in-your-angularjs-models-you-are-doing-it-wrong – Vivz Aug 01 '17 at 04:36
  • This is a simplified example to get the idea across of the issue. In my actual code I do have the ngModal set to an object. The initialization I am referring to happens in the controller and sets the object value to {} (see in the code I provided). When the object default is set like this the required html validator does not work. If I set it to an empty string it works fine. Just curious if there is a reason the {} does not work. – ddelella Aug 01 '17 at 12:50
  • You have to declare it not just on an object but on a key of the object like TrailerType.val , Hazmat .val. So u just have to initialize empty objects in your controller. By simply $scope.TrailerType = {}; in controller and using ng-model="TrailerType " won't work. – Vivz Aug 01 '17 at 12:52
  • @user2249672 Mark as answer if it was helpful – Vivz Aug 01 '17 at 14:00