MD-chips电子邮件验证

Question

Md-chips email validation

How to create an email validation for md-chips? My expression below is not working, since, the ng-keypress directive is called whenever I type something.

Suggestions?

 <div class="row">
   <div class="col-md-12" ng-cloak="">
     <md-context class="md-padding">
       <md-chips md-separator-keys="ctrl.customKeys" ng-keypress="ctrl.validateEmail()" ng-model="ctrl.ConfiguracaoRegra.Emails" md-max-chips="20" placeholder="Inserir um email..." ng-required="true" type="email"></md-chips>
       </md-context>
   </div>
 </div>

   vm.validateEmail = function (keyEvent) {
    var emailValue = angular.element(".md-input").val();
    var reg = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
    if (reg.test(emailValue)) {
        vm.isEmailValid = true;
    } else {
        vm.isEmailValid = false;
    }
};

Answer 1

您应该使用ng-change指令代替ng-keypress keypress，或者将md-on-add和md-on-remove （请参阅https://github.com/angular/material/issues/3580#issuecomment-347052946 ）

Answer 2

My solution was: create a javascript function where I evaluate whether the ENTER was entered and use a regular expression ('/^[_a-z0-9]+(.[_a-z0-9]+)*@[a-z0 (9)] + (. [A-z0-9 -] +) * (. [Az] {2,4}) $ / '), validating by the test () method.

  function validateEmail(x) { if (event.which === 13) { var emailValue = x; var reg = /^[_a-z0-9]+(\\.[_a-z0-9]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[az]{2,4})$/; if (!reg.test(emailValue)) { toastr.error("Digite um email válido!"); vm.ConfiguracaoRegra.Emails.pop(); } }; }; 

 <md-chips md-on-add="ctrl.validateEmail($chip)" ng-model="ctrl.ConfiguracaoRegra.Emails" md-max-chips="20" placeholder="Inserir um email..." type="email" required></md-chips>