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>
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
I create JSFiddle for your problem.
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;
}
}
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.