Check if a input box is empty
Even you don't need to measure the length of string. A ! operator can solve everything for you. Remember always: !(empty string) = true !(some string) = false
So you could write:
<input ng-model="somefield">
<span ng-show="!somefield">Sorry, the field is empty!</span>
<span ng-hide="!somefield">Thanks. Successfully validated!</span>
Quite simple:
<input ng-model="somefield">
<span ng-show="!somefield.length">Please enter something!</span>
<span ng-show="somefield.length">Good boy!</span>
You could also use ng-hide="somefield.length" instead of ng-show="!somefield.length" if that reads more naturally for you.
A better alternative might be to really take advantage of the form abilities of Angular:
<form name="myform">
<input name="myfield" ng-model="somefield" ng-minlength="5" required>
<span ng-show="myform.myfield.$error.required">Please enter something!</span>
<span ng-show="!myform.myfield.$error.required">Good boy!</span>
</form>
Updated Plnkr here.
Another approach is using regex , as show below , you can use the empty regex pattern and achieve the same using ng-pattern
HTML :
<body ng-app="app" ng-controller="formController">
<form name="myform">
<input name="myfield" ng-model="somefield" ng-minlength="5" ng-pattern="mypattern" required>
<span ng-show="myform.myfield.$error.pattern">Please enter!</span>
<span ng-show="!myform.myfield.$error.pattern">great!</span>
</form>
Controller:@formController :
var App = angular.module('app', []);
App.controller('formController', function ($scope) {
$scope.mypattern = /^\s*$/g;
});