Error forms with button (Angular example)

by Alvin Olavarrieta

HTML

<script src="https://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="check" ng-app ng-controller="CheckCtrl" ng-class="cssClass">
  <div class="input-group">
    <input type="text" class="form-control" ng-keyup="checkSpelling($event)" ng-model="text">
    <span class="input-group-btn">
      <button class="btn" ng-class="decode(cssClass)" type="submit">Explode</button>
    </span>
  </div>
  <p class="help-block">{{helpText}}</p>
<div class="checkbox">
    <label>
       <input type="checkbox" ng-model="cssClass" ng-true-value="has-error"> There is an error ...
    </label>
  </div>
</div>

CSS

body {
  padding: 5%;
}

JavaScript

function CheckCtrl($scope) {
    $scope.checkSpelling = function(e) {
		if ($scope.text === 'boom') {
			$scope.cssClass = 'has-success';
			$scope.helpText = 'Good job.';

		} else if ($scope.text === 'boo') {
			$scope.cssClass = 'has-warning';
			$scope.helpText = 'You made a typo.';

		} else if (! $scope.text) {
			$scope.cssClass = '';
			$scope.helpText = '';

		} else {
			$scope.cssClass = 'has-error';
			$scope.helpText = 'Wrong value.';
		}
    };

	$scope.decode = function(cssClass) {
		var result = 'btn-default';
		if (cssClass === 'has-success') {
			result = 'btn-success';

		} else if (cssClass === 'has-warning') {
			result = 'btn-warning';

		} else if (cssClass === 'has-error') {
			result = 'btn-danger';
		}
		return result;
	};
};