JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
	<div class="panel-group">
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h4 class="panel-title">Order Form</h4>
	         </div>
	        <div class="panel-body">
                <ng-include src="'form.html'"></ng-include>
            </div>
	    </div>
	</div>

    <!-- kept seperate from the bootstrap markup to keep this example clean -->
<script type="text/ng-template" id="form.html">
  <div ng-show="form.$submitted && form.$invalid && form.$error.required.length">
           Sorry but {{form.$error.required.length}} errors have been made.
   </div>
 <form name="form" valid-submit="sendForm()" novalidate>
   <div class="form-group clearfix" ng-class="{
                    'has-error': form.$submitted && form.orderNumber.$invalid,
                    'has-success': form.$submitted && form.orderNumber.$valid}">
      <label class="col-sm-2 control-label" for="callName">Order Number</label>
      <div class="alert alert-danger" ng-show="form.$submitted && 
           form.orderNumber.$error.required">Order Number required
      </div>
      <span  ng-show="form.$submitted && form.orderNumber.$error.pattern"
           class="help-block">Order number contains only numbers
      </span>
      <span  ng-show="form.$submitted && form.orderNumber.$error.minlength "
             class="help-block">Order number is too short
      </span>
      <span  ng-show="form.$submitted && form.orderNumber.$error.maxlength" 
            class="help-block">Order number is too long
      </span>                
       <div class="col-sm-5">
       <input id="orderNumber" name="orderNumber" class="form-control" type="text" 
         ng-model="auth.orderNumber" ng-minlength="7" ng-maxlength="10" 
        ...

CSS

.form-group .alert {
  padding: 0px;
  margin-bottom: 0px;
}

.extra-info {
    margin-top: 2em;
    font-size: smaller;
}

JavaScript

var app = angular.module('app', []);

// directive that prevents submit if there are still form errors
app.directive('validSubmit', [ '$parse', function($parse) {
		return {
			// we need a form controller to be on the same element as this directive
			// in other words: this directive can only be used on a &lt;form&gt;
			require: 'form',
			// one time action per form
			link: function(scope, element, iAttrs, form) {
				form.$submitted = false;
				// get a hold of the function that handles submission when form is valid
				var fn = $parse(iAttrs.validSubmit);
				
				// register DOM event handler and wire into Angular's lifecycle with scope.$apply
				element.on('submit', function(event) {
					scope.$apply(function() {
						// on submit event, set submitted to true (like the previous trick)
						form.$submitted = true;
						// if form is valid, execute the submission handler function and reset form submission state
						if (form.$valid) {
							fn(scope, { $event : event });
							form.$submitted = false;
						}
					});
				});
			}
		};
	}
]);
app.directive('match', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        scope: {
            match: '='
        },
        link: function(scope, elem, attrs, ctrl) {
            scope.$watch(function() {
                var modelValue = ctrl.$modelValue || ctrl.$$invalidModelValue;
                return (ctrl.$pristine && angular.isUndefined(modelValue)) || scope.match === modelValue;
            }, function(currentValue) {
                ctrl.$setValidity('match', currentValue);
            });
        }
    };
});


// handle form submission when the form is completely valid
app.controller('MainCtrl', function($scope) {
    $scope.numberoferrors=function(){
        var count=0;
        
    };
  $scope.sendForm = function() {
    alert('form valid, sending request...');
  };
});