Check if a input box is empty
AngularjsAngular UiAngularjs Problem Overview
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!
Angularjs Solutions
Solution 1 - Angularjs
<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>
Solution 2 - Angularjs
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>
Solution 3 - Angularjs
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;
});
Solution 4 - Angularjs
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.
Solution 5 - Angularjs
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>
Solution 6 - Angularjs
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) }"