Угловая пользовательская директива для проверки ввода

Question

I, m пытается создать простую настраиваемую директиву в angularJS , которая проверяет, использует ли пользователь целое число или нет.

Если пользователь вводит целое число, в нижней части должно появиться сообщение об ошибке, которое «целые числа не допускаются».

Любая идея, как я могу достичь этого ...? (A скрипка была бы удивительной)

, а также ...

Возможны ли это сделать БЕЗ используя $ рамки. $ Смотреть?

Является ли это профессиональным и эффективным способом проверки на стороне клиента ввода проверки? (этот подход ставит под угрозу производительность приложения)?

Answer 1

Simpler, чем вы могли бы ожидать .... использовать ng-pattern

<input type="text" ng-model="model" ng-pattern="\\d+" /> 

демо-в документации ссылку выше устанавливается в этот же шаблон по умолчанию.

Что касается этого ... конечно, предоставление отзывов пользователей в реальном времени в форме является нормальным. Это не облегчает проверку на стороне сервера, хотя это должно быть сделано

Answer 2

Вы можете использовать ng-pattern, чтобы проверить, является ли он действительным номером или нет. Другой способ, как вы просили, создать настраиваемую директиву. Я собираюсь с notNumber имя, это может быть isNumber, а также с небольшими изменениями.

angular.module('app') 
    .directive('notNumber', notNumber); 

function notNumber() { 
    return { 
    require: 'ngModel', 
    link: function(scope, elem, attr, ctrl) { 
     ctrl.$formatters.unshift(function(value) { 
     if (value) { 
      ctrl.$setValidity('notNumber', Number.isNaN(value)); 
     } 
     return value; 
     }); 
    } 
    }; 
} 

В HTML

<input type="text" ng-model="model" not-number />