AngularJS: ngMessages not working with ng-options in select

Question

I have seen few answers which were working for ng-repeat, but with ng-options I am facing issue.

Problem : Want to show the error message required if the dropdown is touched and nothing is selected, I am able to do this with input fields.

JS CODE

$scope.personMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
}]

HTML

<select  name="inpName"  ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
        <option value=""  selected hidden/> </select>
        <div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
          <div ng-message="required">Required field</div>
            </div>
           </div>

Referred this ng-repeat solution

Marquis

do anyone else help me with form.inpName.$touched making the select box touched when i just click on it? i tried writing some logic in ng-click but could not get through – Marquis

First: Correct syntax in JS. There is one too many curly bracket. Second: You are referring to "form" in your template. But a form is not included in your question. Do you have one? Also, there is one too many div as well. I recommend you to create a jsFiddle or a Plunkr – Misdemean

@Misdemean : curely brackets are array of object. Also I did not add <form> tag but it is there in my code. – Marquis

@Misdemean : Also i got the real issue here, If i put the same code in codepen it works fine, the issue is my model is setting the object properties to null, so when i click on dropdown nothing changes in model which makes no error to come.But if i set my model=null on click of dropdown, then the error messages shows as expected. – Marquis

Answer 1

As there is no answer yet, I am posting the issue i found out.

So when i use ng-options it starts adding one extra row in the dropdown which can be blank or you can give something like select me.

I added the below code to fix that and in chrome it does not show any blank row.

<option value=""  selected hidden/> </select>

But when i try in IE it still have a blank row, So what happens is when I select one value in dropdown and then click back on the blank row the ngMessage works fine.So if i add one more blank option in chrome and then try to select something first and then click on blank the ngMessage work as expected.

Issue is I was expecting <select> to work like the input fields and was trying to use the$touched` state. But it does not work like that, I was thinking as soon as i click on the dropdown ngMessage should get active if i leave the focus to other field without selecting anything from dropdown. Not sure if I can make it possible through any other way.

Updated HTML

<select  name="inpName"  ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
        <option value="">Select one </option> </select>
        <div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
          <div ng-message="required">Required field</div>
            </div>
           </div>

Marquis