How can I check if a given input control is empty? I know there is $pristine property on the field which tells that if a given field is empty initially but what if when someone fill the field and yanks the whole content again?
I think above feature is necessary as its important for telling the user that field is required.
Any idea will be appreciated!
<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> 
minlength to 5 and enter only three chars then the length property will not be available.
length is not available then it evaluates to undefined which is interpreted as false. If you're trying to do the check in a controller, i.e. in JavaScript and not in an Angular expression, then it's another story where you need to handle the forgiving yourself. Note that there is also a required attribute which might do exactly what you want: docs.angularjs.org/api/ng.directive:input.textrequired example.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> 
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; }); The above answer didn't work with Angular 6. So following is how I resolved it. Lets say this is how I defined my input box -
<input type="number" id="myTextBox" name="myTextBox" [(ngModel)]="response.myTextBox" #myTextBox="ngModel">To check if the field is empty or not this should be the script.
<div *ngIf="!myTextBox.value" style="color:red;"> Your field is empty </div>Do note the subtle difference between the above answer and this answer. I have added an additional attribute .value after my input name myTextBox. I don't know if the above answer worked for above version of Angular, but for Angular 6 this is how it should be done.
Some more explanation on why this check works; when there is no value present in the input box the default value of myTextBox.value will be undefined. As soon as you enter some text, your text becomes the new value of myTextBox.value.
When your check is !myTextBox.value it is checking that the value is undefined or not, it is equivalent to myTextBox.value == undefined.
To auto check a checkbox if input field is not empty.
<md-content> <md-checkbox ng-checked="myField.length"> Other </md-checkbox> <input ng-model="myField" placeholder="Please Specify" type="text"> </md-content> If your textbox is a Required field and have some regex pattern to match and has minlength and maxlength
TestBox code
<input type="text" name="myfieldname" ng-pattern="/^[ A-Za-z0-9_@./#&+-]*$/" ng-minlength="3" ng-maxlength="50" class="classname" ng-model="model.myfieldmodel"> Ng-Class to Add
ng-class="{ 'err' : myform.myfieldname.$invalid || (myform.myfieldname.$touched && !model.myfieldmodel.length) }" 