Email Blacklist and verification

Question

I'm new to Angular and I try to make an easy blacklist check. At the moment I have two texts which I can show and hide with ng-show. The first one should be shown when the Mail-pattern is wrong and the hidden when correct and/or on blacklist.

My Problem is that I don't have a clue how the model must be implemented. At the moment it is simulated by a checkbox. Maybe someone has a hint.

<div class="controls">
  <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
  <input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
<div class="hint">
    <h4 name="mailValidator" ng-if="checked" ng-show="true">Invalid Email</h4>
    <h4 name="checkBlacklist" ng-if="!checked" ng-show="true">Email is not allowed</h4>
</div>

Here is a Fiddle-Demo

Answer 1

I create JSFiddle for your problem.

JSFiddle

View:

<div ng-controller="MyCtrl">
     <input placeholder="Email" ng-model="email" ng-pattern="emailRegExp" ng-class="{ error: !email }" />
     <h4 name="mailValidator" ng-show="!email">Invalid Email</h4>
     <h4 name="checkBlacklist" ng-show="email && inBlackList">Email is not allowed</h4>
</div>

Controller:

function MyCtrl($scope) {
    $scope.inBlackList = false;

    //get from DB in your case
    var bannedEmail = ['qwe@qwe.qwe','qwe1@qwe.qwe','qwe2@qwe.qwe']

    $scope.emailRegExp = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
    $scope.$watch('email', function(newValue) {
       if(newValue){
           if(bannedEmail.indexOf(newValue) > -1) {
               $scope.inBlackList = true;
           }
           else {
               $scope.inBlackList = false;
           }
       }
   });      
}

Answer 2

if you use AngularJS forms validation you can do for first text

<form name="form" class="css-form" novalidate>
    <div class="controls">
      <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
      <input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
    </div>
    <div class="hint">
        <h4 name="mailValidator" ng-show="form.uEmail.$error.email && !onBlacklist">Invalid Email</h4>
        <h4 name="checkBlacklist" ng-show="onBlacklist">Email is not allowed</h4>
    </div>
</form>

then in controller you can watch for email changes and when it's blacklisted set onBlacklist to true, hope that helps