I am in the process of learning AngularJS, still at the most basic stages of form validation. I followed the official tutorial here, and managed to get the validation working like they have, where if input is invalid, the background changes colour.
That is all nice and counts as an important step in my learning, but how do I move a little further and have the validation add / remove CSS classes required by Bootstrap to show visual cues?
Here is my HTML code:
<form novalidate class="css-form">
<div class="form-group">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
</div>
<div class="form-group">
<label class="control-label" for="lname">Last Name</label>
<input type="text" id="lname" placeholder="Last Name" class="form-control" ng-model="user.lname" required >
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input type="email" id="email" placeholder="Email" class="form-control" ng-model="user.email" required >
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input type="password" id="password" placeholder="Password" class="form-control" ng-model="user.password" required >
</div>
<div class="form-group">
<label class="control-label" for="emailpref">Want annoying emails?</label>
<select class="form-control" ng-model="user.emailpref" required>
<option value="Null">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
In the Bootstrap3 documentation, it says that if I need to show a valid state, I must add a CSS class of has-success like so:
<div class="form-group has-success">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
</div>
How can I get my AngularJS validation to do that? At the moment, my AngularJS is as follows:
function UserCtrl($scope) {
$scope.master = {};
$scope.user = { fname: "J", lname: "Watson", password: "test", email: "[email protected]", emailpref: "Yes" };
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
