Улучшаем производительность с новой функцией updateOn в Angular v5

Улучшаем производительность с новой функцией updateOn в Angular v5

От автора: в Angular функции добавляются и развиваются, что мы и сможем наблюдать в версии 5 . В этой статье я расскажу про полезную функцию, добавленную в Angular Forms API  — опция updateOn. По умолчанию при изменении значения FormControl Angular запускает процесс валидации. Например, у вас есть поле ввода, ограниченное формой, тогда Angular будет проводить валидацию для каждого нажатия клавиши.

Проблема

Представьте форму с большими требованиями к валидации. Обновление по каждому нажатию может сказаться на производительности.

К счастью Angular 5 представляет новую опцию, которая повышает производительность за счет задержки обновлений до срабатывания событий blur и submit.

Применение в Reactive Forms

Для применения в Reactive Forms необходимо задать опцию updateOn в значение blur или submit при создании нового объекта FormControl (по умолчанию опция задана в change)

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Или с валидацией:

При работе с FormGroup или FormArray мы можем использовать это для установки значений по умолчанию updateOn для всех дочерних элементов формы. Например:

Улучшаем производительность с новой функцией updateOn в Angular v5

В примере выше оба поля будут обновляться по событию submit, пока один из дочерних элементов не будет явно задан в другое значение для updateOn. Например:

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Применение в Forms Module

Для использования в Forms Module необходимо задать updateOn в blur или submit в ngModelOptions. Например:

Также можно установить значения по умолчанию для updateOn для всех дочерних элементов формы. Например:

В примере выше оба поля будут обновляться по событию submit, пока одному из элементов не будет явно задано свое значение для updateOn в ngModelOption. Пример:

Благодарю Kara Erickson за ее детальные сообщения.

Автор: Netanel Basal

Источник: https://netbasal.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree