Как сделать валидацию в angular?

Question

[Ярослав Винник]

Нужно сделать страничку с использованием Angular.
Пустая белая страница по середине которой должен находиться input.
В input можно вводить только символы {}[]()
Если вводится любой другой символ под инпутом нужно вывести текст "Вы ввели недопустимые символы" - проверка должна быть сразу в момент ввода значений.

По введенной строке нужно сделать валидацию открытых - закрытых скобок, а именно каждой открытой скобке должна соответствовать закрытая. Скобки можно вкладывать в другие скобки. Например:
{[()]({})} - валидно
{()}()[{}] - валидно
{{(})} - не валидно
{) - не валидно
[{}]) - не валидно

Результат проверки нужно писать под полем, проверка должна быть сразу в момент ввода значений.
Я пошел путем стека и он работает когда вводить символы, а когда их удалять из инпута стек наполняется. И еще одно, что делать когда пользователь передвинет курсор где-то в середину набраной строки и там будет что-то вводить?

Answer 1

[Николай]

А зачем так сложно? Сделайте функцию проверки валидности и вызывайте её при каждом изменении модели.

Comments

[Ярослав Винник]

А можно немного подробнее, я не могу придумать алгоритм проверки например такой строки {[{}]()}

[Николай]

Myrzik: элементарный алгоритм. При помощи стека проходите по строке и когда встречаете открывающую скобку - кладёте в стек. Как только попали на закрывающую делаете .pop и сравниваете, совпадают ли скобки по типу. Если совпадают - продолжаете. Иначе невалидная.

[Ярослав Винник]

Николай:
кажется дошло нужно брать не последний вводимый элемент а полностью строку после каждого изменения. Спасибо за помощь.

Answer 2

[Сергей Протько]

читаем документацию к ngModelController, добавляем туда свой валидатор в виде директивы-атрибута для инпута.

Answer 3

[Ярослав Винник]

.directive('brackets', function() {
    return {
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        var stack = [];
        ctrl.$parsers.unshift(function(brackets) {
          var pushed = function(el) {
            var numLastElemStack = stack.length;
            if (stack[numLastElemStack -1] === '{' && el === '}' || stack[numLastElemStack -1] === '[' && el === ']' ||
            stack[numLastElemStack -1] === '(' && el === ')') {
              stack.pop();
            }
            else {
              stack.push(el);
              return 'no valid';
            }

          };
          if (/^[\[|\]|\(|\)|\{|\}]+$/.test(brackets)) {
            var lastCharacter = brackets.substr(-1);
              return pushed(lastCharacter);
          } else {
            return 'no valid';
          }

        });
      }
    };
  })

Я сделал вот так, может вы подтолкнете меня на правильное решение?