html - Why doesn't a required select prevent ng-submit? -
when select required in html5 form , nothing selected appropriate styling hooks seem work , field considered invalid, ng-submit still allows form attempt submit.
why happen , can prevent submission if nothing selected (preferably without controller logic)?
below minimal example styling make obvious validation invalid:
angular.module('app', []).run(function($rootscope) { $rootscope.options = ['1', '2', '3']; $rootscope.attempt = function() { alert('attempted ', $rootscope.selected) } });.form-control.ng-invalid { color: red; border: 1px solid red; }<!doctype html> <html> <head> <link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> </head> <body ng-app="app"> <p>selected: {{selected}}</p> <form ng-submit="attempt()" class="row"> <div class="col-xs-8"> <select class="form-control" ng-model="selected" ng-options="e e in options" required></select> </div> <div class="col-xs-4"> <input class="btn btn-default" type="submit" /> </div> </form> </body> </html>
add <option></option> in <select> this answer suggests
Comments
Post a Comment