Как получить $event в ngChange

Question

[Александр Вульф]

Здравствуйте! Есть у меня input

<input name='login' type='text' ng-change='change()' ng-model='login' />

И при изменении его у меня дергается метод change().

Теперь вопрос: как мне получить именно тот input, в котором произошло изменение текста?

Причина: Изменять класс input'a, если он не удовлетворяет нужным требованиям и возвращать прежний класс, если удовлетворяет.

P.S: Если есть более разумные методы, подскажите пожалуйста!
P.P.S: При использовании ngClick можно передать аргументом $event, из которого можно было вытащить саму ссылку.

Answer 1

[XimikS]

Если наглядно



Сорри за кучу кода — уж что simple_form нагенерил =)

Вообще можно и легче это сделать:

Comments

[XimikS]

через ng-class

[Александр Вульф]

Не) Тут мне приходится использовать name у поля (что делает скрипт более неповоротливым).

Ctrl = ($scope) ->
  $scope.change = (e) ->
    alert e.target #HTMLDOMElement

[XimikS]

mannaro, не понял последний коммент.

ng-class="{{  registerForm.login.$valid ? "class1" : "class2  }}"

это?

[Александр Вульф]

Смотри.
Я сделал так:

<input name='login' type='text' ng-change='change()' ng-model='login' ng-class="{{ registerForm.login.$valid ? 'success' : 'error' }}" />

А затем захотел сменить name у input'a. Тогда мне придется изменять и ng-class:)

[Александр Вульф]

И, кстати, angular ругается на знак вопроса в выражении. А в описании написано:

You cannot write a control flow statement in an expression. The reason behind this is core to the Angular philosophy that application logic should be in controllers, not in the view. If you need a conditional, loop, or to throw from a view expression, delegate to a JavaScript method instead.

[Антон]

Да, тернарный оператор в шаблонах не поддерживается.
Там надо либо так:

<input name='login' type='text' ng-change='change()' ng-model='login' ng-class="{ 'success' :registerForm.login.$valid,  'error':registerForm.login.$invalid }" />

Либо (в общем случае) для ng-style, например, ng-style="{backgroundColor: (condition) && true_value || false_value}"

[XimikS]

А, я чет забыл, и написал с двуми фигурными скобками. Шаблон скомпилился и успешно работает лол :D
В любом случае, зачем это всё надо?
Angular автоматом всякие ng-valid ng-invalid ng-invalid-required классы элементу добавит, от них и плясать можно.

[Александр Вульф]

А если я хочу, например, показать всплывающую подсказку? То как мне скакать от ng-valid и ng-invalid?
В общем, насколько я понял, придется все равно указывать name поля. Т.е. делать так:

Ctrl = ($scope) ->
  $scope.change = ->
    if @form.login.$valid
      #Success
    else
      #Error

[XimikS]

Да. А в чем проблема указать name поля, нафика его менять потом?

Можно кстати сделать подсказке ng-show=«form.login.$valid» а дальше с ng-animate играться.
А если бутстрап используете, вообще удобно — готовая обертка уже есть

Answer 2

[Антон]

Насколько я понимаю, валидацию лучше делать в директивах, например как здесь: www.ng-newsletter.com/posts/validations.html в разделе Custom validations

Comments

[Александр Вульф]

Мне не нужно проверять никаких специфических полей. Достаточно email, и просто текст (т.е. его наличие и max(min)-length).
А здесь, насколько я понял, мы добавляем свою валидацию?

[Антон]

Там — да. Если вам нужны такие простые вещи, то может есть смысл использовать стандартные классы ng-valid, ng-invalid и встроенные валидаторы docs.angularjs.org/api/ng.directive:input?

Answer 3

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

Валидацию инпутов стоит делать только через директивы зависящие от ngModel. Например как-то так:

angular.module('validators', [])

.directive('maxlength', function () {
    
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function ($scope, $el, attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.unshift(validator);
            ngModelCtrl.$formatters.unshift(validator);
            
            function validator (value) {
                    if (value.length > attrs.maxlength) {
                           ngModelCtrl.$setValididy(false, 'maxlength')
                    }

                    return value;
            }
        }
    }
})

Пример не рабочий но должен объяснить суть. Чем это выгодно? Реюзабельность повышается в разы, не нужно городить свои велосипеды, одновременно все привязывается к скоупу и можно проверять валидность полей обращаясь к свойству $valid как у самого поля так и у формы целиком.

Вообще все что касается какой-бы то ни было работы с DOM должно быть вынесено в директивы. а onchange и ngModel нужен только для контроллера или других директив.

Comments

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

По поводу добавления классов — ко всем невалидным полям или же валидным добавляются специфические поля. Насколько я помню есть уже готовый валидатор required атрибута (добавляется класс ng-invalid-require вроде бы), и вроде есть валидатор email-ов. Из коробки, даже писать ничего не нужно.