angular validation not working on select

Question

its a simple form a drop down and a save button. On page load Select should be ng-invalid because it is required and nothing is selected but form and select both are ng-valid and save function is called. and once i select any thing and un select it. then it behaves properly.

            <form role="form" name="frmVariableConfig" id="frmVariableConfig" novalidate ng-submit="frmVariableConfig.$valid && saveChanges()">

            <div>
                <div class="form-group">
                    <div class="form-group control-group">
                        <span>Logic</span>


                        <select name="service_id" class="Sitedropdown" style="width: 220px;"
                                ng-model="CurrCustomer.Logic"
                                ng-options="service.ServiceID as service.ServiceName for service in services"
                                required="">
                            <option value="">Select Service</option>
                        </select>
                    </div>

                </div>
            </div>
            <div>
                <button type="submit" class="btn btn-sm text-right">Save</button>
            </div>
        </form>

where the controller code looks like this.

(function () {
'use strict';
var controllerId = 'dashboard';
angular.module('app').controller(controllerId, ['$scope', dashboard]);

function dashboard($scope) {


    $scope.CurrCustomer = {};
    $scope.CurrCustomer.Logic = false;
    $scope.saveChanges = function () {
        alert('function called');

    };
    $scope.services = [
{ ServiceID: 1, ServiceName: 'Service1' },
{ ServiceID: 2, ServiceName: 'Service2' },
{ ServiceID: 3, ServiceName: 'Service3' }
    ];
}})();

Pankaj Parkar · Accepted Answer · 2015-06-17 19:19:08Z

1

You need to remove the setter $scope.CurrCustomer.Logic = false; from your controller that is filling that ng-model and making it valid on controller load. After filling that CurrCustomer.Logic value it become valid input as it is required.

answered Jun 17, 2015 at 19:19

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Raas Masood Over a year ago

it helped. but now the problem is that i cant see validation message "this is the required field"

Raas Masood Over a year ago

rest is fine that it wont allow me to call save function unless something is selected. but i cant see validation message. does it have somethign to do with novalidate ?

Pankaj Parkar Over a year ago

@RaasMasood where is that message I don't see in your markup? Are you talking about browser popup?

Raas Masood Over a year ago

i am talking about that unobtrusive validation error that pops up if something is wrong with the validation .

Pankaj Parkar Over a year ago

@RaasMasood yes..that is because novalidate attribute

|

Collectives™ on Stack Overflow

angular validation not working on select

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related