Take a look at the code snippet below for an example related to the question. Here are some comments based on the posted code:
- Add the
.form-control class to all textual <input>, <textarea>, and <select> elements
- To display error messages, use something like this:
<span class="help-inline" ng-show="submitted && form.businessprocess.$error.required">Required</span>
- Utilize
ng-class for control over required fields even after submission. Check out the explanation below as well
In order for the form to have control over the required field option even after submission, it needs to be explicitly specified how it should behave. For instance, in dropdown scenarios where users may select a default value such as
<option value="">-- Select Business Process --</option>
, my code tracks this using
ng-class="{true: 'error'}[submitted && form.businessprocess.$invalid]"
. This indicates that there's an error when the form is submitted and the specified form field is
$invalid. It's often used like
ng-class="{'has-success': inputform.email.$valid, 'has-error': inputform.email.$invalid}"
within the
ng-class attribute.
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.businessprocess.$invalid]">
<label class="control-label" for="businessprocess">Your Test dropdown</label>
<div class="controls">
<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
<option value="">-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
</select>
<span class="help-inline" ng-show="submitted && form.businessprocess.$error.required">Required</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true" ng-disabled ="form.$invalid ">Submit</button>
</form>