Как установить проверку на событие размытия?

Я написал пример в plunker. Мне нужно проверить мой ввод, когда пользователь покидает его. Я использовал ng-model-options="{ updateon: 'blur'}" для этого. ng-minlength работает нормально, но это не относится к проверке ng-required.


angularjs angularjs-validation
person S3B4ST14N    schedule 08.04.2015    source источник
comment
Он работает в плункере. необходимая проверка запускается, когда поле пусто.   -  person Anita    schedule 08.04.2015
comment
но срабатывает сразу, я хочу увидеть ошибку после выхода из ввода   -  person S3B4ST14N    schedule 08.04.2015
comment
Нет, он срабатывает только тогда, когда он пуст, и вы щелкаете где-то еще. В противном случае, если он пуст и на нем находится фокус, ошибка не отображается.   -  person Anita    schedule 08.04.2015
comment
но сообщение об ошибке отображается при запуске, и я этого не хочу. Он должен проверяться в первый раз, когда происходит «размытие» события.   -  person S3B4ST14N    schedule 08.04.2015
comment
См. аналогичную проблему stackoverflow.com/questions/18549142/   -  person Reena    schedule 08.04.2015
comment
поэтому вы предлагаете написать пользовательскую директиву проверки?   -  person S3B4ST14N    schedule 08.04.2015
comment
‹div ng-show=myForm.input.$invalid && myForm.input.$dirty› добавьте это перед ‹span ng-if=myForm.input.$error.required›Вы не ввели значение‹/span› ‹ span ng-if=myForm.input.$error.minlength›to short‹/span› и после этого закройте div   -  person Anita    schedule 08.04.2015

Ответы (3)


arrow_upward
1
arrow_downward

(отредактировано, удален другой пример, так как это сбивало с толку)

Попробуйте $touched.

Я разветвил ваш планк

http://plnkr.co/edit/tt5A1DUjmq07TiEKhtNP?p=preview

Я также добавил два поля, чтобы вы могли видеть, как они работают, например, переход от одного к другому.

HTML

<input name="inputA" type="text" ng-model="valueA" ng-required="true" ng-model-options="{updateOn: 'blur'}" ng-minlength="3" />
<span ng-if="myForm.inputA.$error.required && myForm.inputA.$touched">You didn't enter a value</span>
<span ng-if="myForm.inputA.$error.minlength">to short</span>
<br/>
<input name="inputB" type="text" ng-model="valueB" ng-required="true" ng-model-options="{updateOn: 'blur'}" ng-minlength="3" />
<span ng-if="myForm.inputB.$error.required && myForm.inputB.$touched">You didn't enter a value</span>
<span ng-if="myForm.inputB.$error.minlength">to short</span>
person Steve Drake    schedule 08.04.2015
comment
что я должен поставить как mainForm - название моей формы, так myForm? под [field.Name] ты подразумеваешь имя входа - input? потому что я не понимаю эту нотацию .. - person S3B4ST14N; 08.04.2015
comment
для вашего кода это просто myForm.input.$touched , наши формы генерируются из данных, следовательно, мой [field.Name] , извините, я должен был сделать это ясно - person Steve Drake; 08.04.2015
comment
Я попробовал это на вашем планке в соответствии с первым примером кода. - person Steve Drake; 08.04.2015
comment
Лучший ответ на этот вопрос был бы, если бы кто-то показал способ применить ng-model-options="{updateOn: 'blur'}" к требуемой проверке... Я не знаю, почему angular не разрешает это:/ потому что тогда будет установлен флаг ошибки, а также ng-invalid-required класс CSS. - person S3B4ST14N; 08.04.2015
comment
$ коснулся не работает? он отлично работает на вашем планке, updateOn обновляет только модель, проверка которой происходит в форме, если вы добавите {{myForm.input}}, вы увидите, что происходят другие вещи. - person Steve Drake; 08.04.2015
comment
Кроме того, взгляните на документы по allowInvalid allowInvalid: логическое значение, которое указывает, что модель может быть установлена ​​со значениями, которые не были правильно проверены, вместо поведения по умолчанию, когда модель устанавливается на неопределенную. - person Steve Drake; 08.04.2015
comment
Сегодня посмотрю, что будет ;) - person S3B4ST14N; 09.04.2015

arrow_upward
1
arrow_downward

Я считаю, что вам следует использовать updateOn

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

вместе с

novalidate=""

на форме

person Pavel Blagodov    schedule 23.09.2016

arrow_upward
0
arrow_downward

Если вы добавите ng-focus="blur = false" ng-blur="blur=!blur" к вводу и измените ng-if на "myForm.input.$error.required && blur">, сообщение исчезнет, ​​когда ввод вернет фокус, и появится размытие, если оно пусто.

person probinson    schedule 08.04.2015