Check if a input box is empty

Question

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

User · Answer

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    lt input ng-model  somefield  gt   lt span ng-show   somefield  gt Sorry  the field is empty  lt  span gt   lt span ng-hide   somefield  gt Thanks  Successfully validated  lt  span gt

User · Answer

To auto check a checkbox if input field is not empty     lt md-content gt               lt md-checkbox ng-checked  myField length  gt  Other  lt  md-checkbox gt               lt input  ng-model  myField  placeholder  Please Specify  type  text  gt    lt  md-content gt

User · Answer

Another approach is using regex   as show below   you can use the empty regex pattern and achieve the same using ng-pattern  HTML      lt body ng-app  app  ng-controller  formController  gt    lt form name  myform  gt    lt input name  myfield  ng-model  somefield  ng-minlength  5  ng-pattern  mypattern  required gt    lt span ng-show  myform myfield  error pattern  gt Please enter  lt  span gt    lt span ng-show   myform myfield  error pattern  gt great  lt  span gt   lt  form gt      Controller  formController     var App   angular module  app        App controller  formController   function   scope                     scope mypattern      s   g

User · Answer

If your textbox is a Required field and have some regex pattern to match and has minlength and maxlength  TestBox code   lt input type  text  name  myfieldname  ng-pattern      A-Za-z0-9      amp  -      ng-minlength  3  ng-maxlength  50  class  classname  ng-model  model myfieldmodel  gt    Ng-Class to Add  ng-class     err     myform myfieldname  invalid     myform myfieldname  touched  amp  amp   model myfieldmodel length

User · Answer

Quite simple    lt input ng-model  somefield  gt   lt span ng-show   somefield length  gt Please enter something  lt  span gt   lt span ng-show  somefield length  gt Good boy  lt  span gt    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    lt form name  myform  gt     lt input name  myfield  ng-model  somefield  ng-minlength  5  required gt     lt span ng-show  myform myfield  error required  gt Please enter something  lt  span gt     lt span ng-show   myform myfield  error required  gt Good boy  lt  span gt   lt  form gt     Updated Plnkr here

User · Answer

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 -   x000D   x000D   lt input type  number  id  myTextBox  name  myTextBox  x000D     ngModel    response myTextBox  x000D               myTextBox  ngModel  gt  x000D   x000D   x000D    To check if the field is empty or not this should be the script    x000D   x000D   lt div  ngIf   myTextBox value  style  color red   gt  x000D   Your field is empty x000D   lt  div gt  x000D   x000D   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

[angularjs] Check if a input box is empty

Examples related to angularjs

Examples related to angular-ui