이메일 블랙리스트 및 확인

Question

저는 Angular를 처음 사용하고 있으며 블랙리스트를 쉽게 확인하려고합니다. 현재 Ng-show로 보여주고 숨길 수있는 두 개의 텍스트가 있습니다. 메일 패턴이 잘못되었을 때 첫 번째 메시지가 표시되고 올바른 경우 및/또는 블랙리스트에 숨겨져 있어야합니다.

내 문제는 모델을 구현하는 방법을 알 수 없다는 것입니다. 현재 체크 박스로 시뮬레이트됩니다. 어쩌면 누군가가 힌트를 가지고 있을지도 모른다.

<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

난 당신의 문제에 대한 JSFiddle을 만듭니다.

JSFiddle

보기 :

<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> 

컨트롤러 :

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

당신이 AngularJS forms 유효성 검사를 사용하는 경우 먼저 텍스트를 위해 할 수있는

이메일 변경을 감시하고 true로 onBlacklist 설정 블랙리스트 때, 희망 수 컨트롤러에서 다음

<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> 

도움이