CODEWITHSUNDEEP
angularjsdrop-down-menung-optionsangular-ng-ifng-messages
NeverGiveUp161
NeverGiveUp161

Reputation: 870

AngularJS: make the select work on click of dropdown, ngMessages issue

So I have a select box which populates some values into the dropdown using ng-options So I want to show the error messages as soon as the user click on the dropdown and focus out without making a selection.

JS Code

$scope.someMap = [{ 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 someMap 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>

So it is working in a case where I add a blank option like option value="" selected hidden/> </select> and select some valid value and then select the blank option again, it gives error message as Required field.

But as you can see, the above selectbox will be blank once the page loads, so if use click on the dropdown and focus out without selecting or move to other field without selecting any value it should give error as Required field.

now if I try to iterate through the value of form.inpName.$error is never having any value and i cannot validate it using the above technique.

I have tried ng-show , ng-if , message expression may be am lacking some expertise.All of them works after selecting valid entry from dropdown and then moving back to blank option.

Solutions which would not work for me

  1. Check model value:I do not want to go to model for these types of field and check if they are blank then show some error message, rather I want to iterate through the $error array and find the issue with the field
  2. Make the default option selected when page loads- Cannot do it.
  3. Add a field as selected one options : This will also not work because if the user did not touch the selection at all and filled all other fields the $error will not be populated for this select dropdown.

Any help would be much appreciated, really struck on this one.

Upvotes: 1

Views: 656

Answers (1)

NeverGiveUp161
NeverGiveUp161

Reputation: 870

As helped by @Ininiv in above post the code i posted works fine in plunker but not in my dev environment.

So based on some POJO/Entity out objects gets formatted with properties as null.So when i select and the option populates angular does not see as a change in the model, unless i select a value from dropdown and select a blank option from dropdown again. It gets activated.

But I wanted it to start working from the first touch itself, if left blank the error message should pop up.

To tackle this the ngModel needed to be set to null, when the dropdown the $error thing is activated and If i leave it blank and move to other field the error shows up.

So basically on the change of model only the ngMessages directive get activated which was not happening for dropdowns which were populating based on some object properties.

Upvotes: 0

Related Questions