Best IT Recipes

Check if the input field is empty

How to check if a given input control is empty? I know that there is a $pristine property in the field that says that if the given field is empty initially, but what if someone fills the field and writes all the contents again?

I think that the function above is necessary, since it is important to tell the user that this field is required.

Any idea would be appreciated!

+51
angularjs angular-ui
May 22 '13 at 12:28
source share
5 answers

Pretty simple :

 <input ng-model="somefield"> <span ng-show="!somefield.length">Please enter something!</span> <span ng-show="somefield.length">Good boy!</span>

You can also use ng-hide="somefield.length" instead of ng-show="!somefield.length" if this is more natural for you.



A better alternative would be to use the capabilities of Angular forms :

 <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.

+84
May 22 '13 at 12:33
source share

Even you do not need to measure the length of the string. A! The operator can decide everything for you. Always remember:! (empty string) = true! (some line) = false

So you can write:

 <input ng-model="somefield"> <span ng-show="!somefield">Sorry, the field is empty!</span> <span ng-hide="!somefield">Thanks. Successfully validated!</span>
+13
Oct 27 '14 at 18:45
source share

Another approach is to use regex as shown below, you can use an 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; });
+5
Feb 02 '15 at 9:25
source share

To automatically check the checkbox if the 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>
0
Aug 20 '17 at 12:08 on
source share

The above answer did not work with Angular 6 . So that's how I decided it. Let's say that I defined my input field -

 <input type="number" id="myTextBox" name="myTextBox" [(ngModel)]="response.myTextBox" #myTextBox="ngModel">

To check if a field is empty or not, it must be a script.

 <div *ngIf="!myTextBox.value" style="color:red;"> Your field is empty </div>

Note the subtle difference between the answer above and this answer. I added an extra .value attribute after my input name myTextBox . I don’t know if the above answer worked for the above version of Angular, but for Angular 6 it should be done.

A few more explanations of why this check works; if there is no value in the input field, the default value of myTextBox.value will be undefined . As soon as you enter some text, your text will become the new value myTextBox.value .

When your check is !myTextBox.value it checks that the value is not defined or not, it is equivalent to myTextBox.value == undefined .

0
Jan 10 '19 at 6:12
source share


More articles:


All Articles