Issue with validation in Angular JS

Question:

I have an Angular JS project. In it implemented form based on bootstrap markup (only css, without js). In the form have a telephone field for which I need to implement a validation.

Rules for validation:

1. Phone must contain only numbers, blank spaces & "+" character

2. Phone must be have minimum 11 numbers & maximum 15 numbers

Here is the code(for validation I dont use any js scripts, only angular markup):

<div class="row">
     <div class="col-sm-12">
          <input id="Text5"
                 name="telephone"
                 placeholder="Enter phone number (only digits or spaces)"
                 type="text"
                 ng-model="ManageDetailsCtrl.ManageDetails.Phone"
                 class="form-control"
                 style="width: 100%;"
                 ng-minlength=11
                 ng-maxlength=15
                 ng-pattern="^\+*\d{11,15}$"
                 required>
      </div>
</div>


<div class="error" ng-show="form.telephone.$dirty && form.telephone.$invalid">
     <div class="error" ng-show="form.telephone.$error.required">
          Phone number is required.
     </div>
     <div class="error" ng-show="form.telephone.$error.minlength">
          Phone number ruquired to be at least 11 characters
     </div>
     <div class="error" ng-show="form.telephone.$error.maxlength">
          Phone number cannot be longer than 15 characters
     </div>
</div>

The questions is follow:

1. When I'm typing numbers it isnt afflect for min & max numbers. I'm always have the error: "Phone number ruquired to be at least 11 characters"

2. Dont know how to bind regular expression. Because teoretically with already implemented 3 types of validation I may print: +1234 56789 - here is 11 characters. Maybe I need to change smth, but I dont know what.

Is anybody help me?

You need to add ng-class="{'has-error'}"
PLUNKER:HERE
Example:

<div class="form-group" ng-class="{'has-error': form.telephone.$dirty && form.telephone.$invalid}">
        <input id="Text5"
               name="telephone"
               placeholder="Enter phone number (only digits or spaces)"
               type="text"
               ng-model="ManageDetailsCtrl.ManageDetails.Phone"
               class="form-control"
               style="width: 100%;"
               ng-minlength=11
               ng-maxlength=15
               //ng-pattern="^\+*\d{11,15}$"
               required>
    <div ng-show="form.telephone.$dirty && form.telephone.$invalid">
        <span ng-show="form.telephone.$error.required" class="help-block">can't be blank</span>
        <span ng-show="form.telephone.$error.minlength" class="help-block"> is too short (min 11 characters)</span>
        <span ng-show="form.telephone.$error.maxlength" class="help-block"> is too long (max 15 characters)</span>
    </div>
    </div>

Related:

Pre-Select of an option in a select not working

How to define style to layout-margin flex variants, using Angular Material

How to select multiple selected value from select option

HTML elements in Angular bindings expression

UI-Router : Prevent access to parent state

AngularJS: Adding ng-click within element.append

How to add class on ng-click?

jQuery validate equalTo

calling one controller from another controller

AngularJS line break at points after a maximum length was reached

Angularjs $watchCollection on $rootScope not triggered when values updated from directive

Angular-strap data-trigger='focus' not working

Using ng-click to toggle between two functions

Angular submit not called when required fields not filled

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

remove char from string with angular

Can't get angular.js to loop through array and post to html

Merge and sum values and put them in an array

Validation of a form before submission

validation of AngularJS direcrives

Angular $http and Fusion Tables in IE9

Create angular page in Django to consume data from JSON

How do I add a class on ng-click from layout?

AngularJS factory dependencies

Getting generic anchor text on click with angularJS/jQuery returns empty string

navbar disappears but no dropdown

Passing params to an angular service from a controller?

how to multiply two column names using codeigniter validation rule

success and error function in the controller for a service

AngularJS dynamically call function

$http.get returns actual php script instead of running it (yeoman, grunt)

$scope variable does not update within $interval function

Getting CROS Error even after adding header in node.js for Angular js

Is there a way to fire an event every time an ajax call in made in AngularJS?

How can this be undefined in the constructor of an Angular config class?

How to use a service with Http request in Angular JS

angular.js - simplest way to handle click inside controller

Socket.IO message doesn't update Angular variable

Improve slow angular directive

AngularJS - binding/linking two directives together

Save to 3 firebase locations with a slow internet connection

Uncommon “10 $digest iterations reached” case

Can't save json data to variable (or cache) with angularjs $http.get

Angular controller error: 'Controller is not a function, got undefined'

REST API with token based authentication

AngularJS, Animate on change: directive $watch not called

function is undefined if no module is declared in Angular

Iframe does not show scrollbar

Angular ng-repeat cache (avoid re-rendering on state change)

AngularJS & Bootstrap Modal - loading template outside controller