Set Validity on other inputs using directives upon button click in AngularJS

Question

I am not very familiar with the directives in the AngularJS as I'm used on relying on controllers. Is it possible to set validity on other inputs via directive? Here is the case, I have a button and when it is clicked.. It should set a validity on a certain input text. But I just can not seem to get the code that will set the validity.

Here is the HTML code:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>

  <body>
    <div class="container">
        <div id="login-container">
            <div class="form-group">
                <span class="glyphicon glyphicon-user"></span>
            </div>
            <form name="loginForm" novalidate>
                <div class="form-group">
                    dasdas -- {{ loginForm.student_code.$error.codeValidity }}
                    <input type="text" class="form-control text-center" name="student_code"  ng-model="studentCode" placeholder="Enter Exam Code" required />
                    <span class="errors" id="error-student-code" ng-if="loginForm.student_code.$error.codeValidity">{{ errors }}</span>
                </div>
            </form>
            <login-button form="loginForm"></login-button>
            <a href="register"><button class="btn btn-primary">Register</button></a>
        </div>
    </div>
  </body>
</html>

Here is the JS Code:

  var app = angular.module("myApp", []);

  app.directive('loginButton', loginButton);

  loginButton.$inject = ["$http", "$window"];

  function loginButton($http, $window){
    return {
        template: '<button type="button" class="btn btn-primary">Take Exam</button>',
        link: function(scope, element, attrs, ctrl){
            element.on('click', function(){
                    form = attrs.form;
                    form.student_code.$setValidity('codeValidity', true);
                    scope.errors = "Code is Invalid";
                });
            }
        }
    }

Here is a sample on plunker: http://plnkr.co/edit/kcdDgZpStQixTpGWqxOp?p=preview

PS.

I know this can be easily achieved using controllers but I would like to achieve this using directives as my practice to get used to it.

sielakos · Accepted Answer · 2016-05-29 12:11:34Z

1

Yes, it is possible and you almost got it right. What you wanna do is pass form to isolated scope and then use in directive controller. There is no need to add event manually, as you can use ng-click. Otherwise you would need to use $scope.$apply.

In directives you can use linking function, but you don't have to. In general it is good practice to keep light logic in controller and DOM manipulation in linking function.

var app = angular.module("myApp", []);

app.directive('loginButton', loginButton);

loginButton.$inject = ["$http", "$window"];

function loginButton($http, $window){
  return {
    template: '<button type="button" class="btn btn-primary" ng-click="click()">Take Exam</button>',
    scope: {
      form: '='
    },
    controller: function($scope){
      $scope.click = function(){
        form = $scope.form;
        form.student_code.$setValidity('codeValidity', false);
      };
      
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="myApp">
    <div class="container">
        <div id="login-container">
            <div class="form-group">
                <span class="glyphicon glyphicon-user"></span>
            </div>
            <form name="loginForm" novalidate>
                <div class="form-group">
                    dasdas -- {{ loginForm.student_code.$error }}<br>
                    <input type="text" class="form-control text-center" name="student_code"  ng-model="studentCode" placeholder="Enter Exam Code" required />
                    <span class="errors" id="error-student-code" ng-if="errors">{{ errors }}</span>
                </div>
            </form>
            <login-button form="loginForm"></login-button>
            <a href="#"><button class="btn btn-primary">Register</button></a>
        </div>
    </div>
</div>

answered May 29, 2016 at 12:11

sielakos

2,40413 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dean Christian Armada Over a year ago

Your answer is great! However, I missed something. I kinda changed the code. Please take a look at <span class="errors" id="error-student-code" ng-if="loginForm.student_code.$error.codeValidity">{{ errors }}</span>. Because of the "scope: {}" declared array on the directive, I cannot declare any scope variables for the outside of the directive like the {{ errors }}. Which should show the error message in case the codeValidity error is true

Dean Christian Armada Over a year ago

Thanks a lot! I'm not really familiar with the capabilities of the directives. I owe you one

Collectives™ on Stack Overflow

Set Validity on other inputs using directives upon button click in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related