AngularJS UI Select Validation

Question

Привет Я работаю над приложением AngularJS с полем для выбора нескольких адресов электронной почты из удаленного источника. Я использую Angular UI Select для этого поля. Пользователь также может ввести действительное электронное письмо, которое не существует. Проблема заключается в том, как я могу запретить пользователю вводить неверный адрес электронной почты.

Вот пример фрагмента кода:

<ui-select multiple tagging tagging-label="('new' email)" ng-model="emails" theme="bootstrap" sortable="true" required> 
<ui-select-choices repeat="email in emails track by emailId" refresh="refreshEmailAddresses($select.search)" 
refresh-delay="0"> 
</ui-select-choices> 
</ui-select> 

Answer 1

Вы можете использовать Regex:

$scope.validEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i; 

После этого, добавьте ngPattern к вашим модулям и включить его в вашей директиве:

<ui-select multiple tagging tagging-label="('new' email)" ng-model="emails" theme="bootstrap" sortable="true" ng-pattern="validEmail" required> 
    <ui-select-choices repeat="email in emails track by emailId" refresh="refreshEmailAddresses($select.search)" 
    refresh-delay="0"> 
    </ui-select-choices> 
</ui-select> 

Answer 2

Вы можете использовать $ watch на входе и проверить в часах с регулярным выражением или что нибудь. Возможно, что-то вроде этого, надеюсь, что он указывает вам в правильном направлении:

$scope.$watch('multipleDemo.emails', function(n, o) { 
    if (!n) { 
     return; 
    } 
    //validation here drop into n 
    if (n === expression) { 
     $scope.emails.push(n); 
    } else { 
     var index = $scope.emails.indexOf(n); 
     $scope.emails.slice(index,1); 
    } 
    });