Change instant value change in Angular model

Question

Angular

I use Angular, I have field validation implemented, like this:

<input class="d-form__input-text" ng-model="email" ng-required="true"  ng-pattern="{{EMAIL_REGEXP}}" name="email" type="email">

everything seems to be ok, but if I start typing text, the change is immediately updated - accordingly, an email with one character cannot be valid and errors are drawn ahead of time.
Those. the user has not yet finished entering, he already says - it's not valid, how can you make the validation work either with a delay or after the user has moved to another field, etc.

Answer 1

Thank you.
I messed around with this question, but I got to know angular a little more :)
I tried a variety of approaches, but the most optimal and acceptable for me was just to use CSS, just like that, i.e. if a person puts focus in the field, then the usual state of the focus field - we do not display highlights and errors for him. Editing in progress. As soon as he moves to another field, this condition is not relevant and he already sees errors, if any, of course.

Answer 2

I got out of this situation very simply - I display validation errors only if the person clicked "Save" and there are errors. I also hide the validation error if, after the validation error was displayed, the person began to write something in this field.
The only problem with this approach is a bunch of extra html markup. But I have a small bike to solve it.

Answer 3

There is an ng-Focus directive that can call a timer or something.
Unfortunately, there is no focus loss event, so there is also a bicycle.

Answer 4

As an option, make the design using add. class via ng-class. Those. the visual display of the error will only be when the ng-class condition is triggered. It will be possible to write any function under it.
There is also one dirty solution for ng-pattern - stackoverflow .

Answer 5

Read the AngulaJS docs, there should be a timer or event type selection for validation to fire.
I would put the events change (value change in the field) and past (insertion into the field).