Search code examples
angularjsformsvalidationinternet-explorerrequired

Validation Issue in IE 11 when same ng-model in multiple form set to required

The application I am working on has multiple tabs, each tab contains a form with ng-submit. And they share some common fields for example: selectedService.

It's been set to required in both forms. However updating it in one form then switch to another form, Chrome wouldn't complaint it's required since it already has value, however IE 11 complaints that it's required although it already has data entered and angular indicates that it's valid as well.

Is there anyway that I can update IE to let it know that this model has been updated and it has value? Or it's the form needs re-validation?

---------------------Update--------------

I am finally able to replicate it: http://plnkr.co/edit/Gjphya?p=preview So if you select a value in the first dropdown and click submit in the second row, it says it's required. This only happens in IE, not in Chrome or other browsers.

And I think the problem is around this line:

 $scope.selectedService = null;

Thanks!

Solution

  • All I need to fix is to add this line in the select tag:

    <option value="">Please Select...</option>

    If I init the ng-model in controller, it also fix the issue, however sometimes it causes unexpected issue if the dropdown is binded to an array instead of object collection.