CODEWITHSUNDEEP
phphtmlangularjs
Lee Lee
Lee Lee

Reputation: 583

angularjs: how to use if-else condition in directives

when the user input a username on the textbox the directive will check if the username is already existing or available in the database. If the user exists, there is a warning shown beside the textbox saying the "user is already exist". If it does not exist, there is a warning saying "username available".

My problem is when I enter an existing username in the textbox it shows nothing but when I enter a username which is not existing in the database then it show's "username exists". Why is this happening?

uniqueUsers.php

<?php
$app->get('/uniqueUsername/:username', function ($username) {
$status_code = 200;
$resp = array('status'=>'success','message'=>'Query Success','data'=>null);
$resp['data'] = User::find_by_active_and_username('1',$username); 

   if(is_object($resp['data'])){
      $resp['data'] = $resp['data']->to_array();
   }
   else{
      $resp['data'] = objToArr($resp['data']);
   }
   JSONResponse($status_code,$resp);
});

Directive: usernameavailable.js

angular.module('installApp')
.directive('usernameAvailable', function ($http, $timeout) {
   return {
     restrict: 'AE',
     require: 'ngModel',
     link: function(scope, elm, attr, model) { 
        model.$asyncValidators.usernameAvailable = function(username) { 
          return $http.get('../api/v1/uniqueUsername'+'/'+username).then(function(res){+
                $timeout(function(){
                    model.$setValidity('usernameAvailable', !!res.data); 
                }, 1000);
            }); 

        };

     }
  };
});

HTML: accounts.html

  <input type="text" name="username" ng-model="username" username-available required ng-model-options="{ updateOn: 'blur' }">
  <div ng-if="myForm.$pending.usernameAvailable">checking....</div>
  <div ng-if="myForm.$error.usernameAvailable">Username available</div>

Please help. Thanks in advance :-)

Upvotes: 2

Views: 858

Answers (1)

Narek Mamikonyan
Narek Mamikonyan

Reputation: 4611

use ng-messages directive , example from here

<div ng-if="myForm.username.$dirty">
           <div ng-messages="myForm.username.$error" class="validation-error">
                <div ng-message="required">Username required</div>
                     <div ng-message="username">Username already in use</div>
                 </div>
               <div ng-messages="myForm.username.$pending" class="validation-pending">
                     <div ng-message="username">Checking username availability...</div>
                        </div>
                    </div>

Upvotes: 1

Related Questions