Angular — запуск сообщения о размытии после того, как пользователь редактирует поле

Как и другие, я искал хороший способ проверки своих форм с помощью Angular без слишком агрессивных сообщений. Самое близкое, что я получил, это проверка $dirty и $touched перед запуском сообщений. Который работает для большинства ситуаций.

Единственная ситуация, которую я не могу понять, это когда пользователь редактирует, например, обязательное поле. В поле есть текст, оно действительное, грязное и тронуто. Пользователь возвращается в поле, чтобы изменить его. Они удаляют то, что находится на входе, и немедленно срабатывает сообщение, потому что ввод теперь грязный, затронутый и недействительный. Я бы предпочел «сбросить» в этот момент и переоценить, когда пользователь снова размывает ввод. Дайте им возможность заполнить ввод, пока он все еще находится в фокусе.

Есть смысл? Любые идеи?

Спасибо! Мэтт


validation forms angularjs ng-messages
person Mattaton    schedule 18.03.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Возможно, это работает:

ng-model-options="{ updateOn: 'blur' }"

Добавьте его в свой элемент input. Я считаю, что проверка будет происходить при обновлении модели, таким образом, модель обновляется при размытии.

Здесь вы можете увидеть дополнительные параметры этой директивы: https://docs.angularjs.org/guide/forms в разделе Триггеры обновления пользовательской модели. И более подробные пояснения в ngModelOptions.

Дайте мне знать, если это работает :)

person Ariel    schedule 18.03.2016
comment
Спасибо! Я думаю, что это работает, и я собираюсь щелкнуть эту галочку, чтобы сделать это ответом. Я просто пытаюсь выяснить, есть ли недостаток в том, что модель обновляется только при размытии. Например, у меня есть заголовок, привязанный к одной из входных моделей. Он не появляется до тех пор, пока ввод не будет размыт. Впрочем, это может быть хорошо. Просто нужно подумать об этом. :-D - person Mattaton; 18.03.2016
comment
Что бы ни работало для вас, я не знал об этой части проблемы, хех, но пока это решает вашу проблему. Я считаю, что это более простой способ. Возможно, вы можете использовать {{ yourInputModel || 'Your waiting message here' }} в своем шаблоне. Поэтому, когда $scope.yourInputModel не установлен, отображается это сообщение. Есть много обходных путей. Ваше здоровье! - person Ariel; 18.03.2016
comment
Хм, да, другой недостаток заключается в том, что он также не говорит им, что они правы, как только они исправляют поле, пока они не размывают поле. Я полагаю, нужно брать хорошее с плохим! :-) - person Mattaton; 18.03.2016
comment
Да, с помощью FormController вы можете проверить мой ответ на другой вопрос: stackoverflow.com/questions/35660346/ - person Ariel; 18.03.2016
comment
Сочетание того и другого может привести к желаемой цели :) - person Ariel; 18.03.2016

arrow_upward
0
arrow_downward

Используйте функцию ng-blur для проверки и отображения сообщений, если они недействительны.

ng-blur="validate()"

В вашем контроллере -

$scope.validate = function(){
   //Validate logic
     //If invalid
        //Show message logic here  
}
person Amit Sirohiya    schedule 18.03.2016
comment
Спасибо. Я пытаюсь определить, является ли это более сложным, чем мне нужно, чтобы выполнить то, что я ищу. Как бы вы использовали функцию validate() для отображения ngMessages? И мне нужно передать функции validate() фактический элемент, который ее вызвал, или angular уже обрабатывает это соединение? Я новичок в angular, поэтому эти вещи для меня еще не очевидны. :-) - person Mattaton; 18.03.2016
comment
Я полагаю, вам нужно будет передать аргумент функции validate(), чтобы узнать, какое поле ввода размыто, и действовать соответственно. - person Ariel; 18.03.2016
comment
@Ariel Почему вы не можете передать аргумент, чтобы проверить значения в $scope, чтобы проверить их? - person Amit Sirohiya; 21.03.2016
comment
Я предложил это, потому что я попытался бы получить доступ к свойствам $scope динамически, вместо того, чтобы проверять все свойства каждый раз, когда один ввод теряет фокус. - person Ariel; 21.03.2016

arrow_upward
0
arrow_downward

Взгляните на документацию ngMessages: https://docs.angularjs.org/api/ngMessages/directive/ngMessages

У вас есть пример, который показывает вам, как его использовать:

<form name="myForm">
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="5"
           ng-maxlength="20"
           required />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>

Я думаю, что это лучший способ сделать это (по крайней мере, я так делаю).

person Astaroth    schedule 18.03.2016
comment
Спасибо, но я не вижу, как это поможет с моим вопросом. Я уже знаю, как использовать ngMessages, по крайней мере, насколько показывает этот пример (у меня почти такая же точная настройка разбросана по всему моему коду). Я искал очень конкретный случай, когда показывать сообщение. - person Mattaton; 18.03.2016