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!
This question is related to
angularjs
angular-ui
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>
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) }"
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"_x000D_
[(ngModel)]="response.myTextBox"_x000D_
#myTextBox="ngModel">
_x000D_
To check if the field is empty or not this should be the script.
<div *ngIf="!myTextBox.value" style="color:red;">_x000D_
Your field is empty_x000D_
</div>
_x000D_
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
.
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;
});
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>
Source: Stackoverflow.com