how to Hide the angular element based on a condition

Question

I am creating the custom directive for input validation. Here I checked the input length, if input length is zero, it will show the error and am not unable to if an input is filled with characters, I want to hide it.

Here is my Code :

app.directive("formValidate", function() {
  return {
    require: 'ngModel',
    template: '<p>Please Fill this Field</p>',
    link: function(scope, elem, attr) {

        scope.$watch(attr['ngModel'], function(value) {

            if (((value || '').toString()).length == 0) {
                var errorMessage = angular.element("<p class='error'>This field is requiured!</p>");
                errorMessage.insertAfter(elem);
                //$compile(errorMessage)(scope);
            } else {
                 // What to do??
            }
        })


   <input form-validate required md-no-asterisk ng-model="newEmployee.name" type="text" id="name" name="name">

you can use the "ng-show" parameter as described in this answer: https://stackoverflow.com/a/19021489/4603295 — Adriano, Nov 10 '17 at 05:58
I want to get the class and remove the error class if the input length is greater than zero, how to do?? — Sathya Babu Ram k, Nov 10 '17 at 06:02
No, I want to hide the
with use of class as specified in the angular element — Sathya Babu Ram k, Nov 10 '17 at 06:42

score 0 · Answer 1 · answered Nov 10 '17 at 08:37

0

If you want to hide element using class then you can create a class with

display:none

property, and apply class using ng-class

But angular itself provides good directives called ng-show or ng-hide.

ng-show or ng-hide will render DOM element but will just hide on condition satisfied. If you use ng-if it will not even render DOM until and unless the condition is satisfied.

if (((value || '').toString()).length == 0) {
   $scope.hasError = true;
}else{
//do whatever 
}

in HTML just use

<p ng-show="hasError">Your Error Msg</p>

There are so many other methods can be used to do the same.

answered Nov 10 '17 at 08:37

Abhijeet Sarswat

74
3

it does not show any error while the value is equal to zero – Sathya Babu Ram k Nov 10 '17 at 10:16
Hi, Check if your variable is in the scope or not..? Try Printing the value of the variable in HTML. or try using this method it is working fine. `
Error
` – Abhijeet Sarswat Nov 10 '17 at 11:21
whether I want to define the scope of the directive? – Sathya Babu Ram k Nov 10 '17 at 11:49
Error
This doesnt need a directive even... – Abhijeet Sarswat Nov 10 '17 at 11:57

how to Hide the angular element based on a condition

1 Answers1