Улучшаем производительность с новой функцией 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)

this.email = new FormControl(null, { updateOn: 'blur' });

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

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

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

Узнать подробнее
this.email = new FormControl(null, {
 validators: Validators.required,
 updateOn: 'blur'
});

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

this.login = new FormGroup({
 email: new FormControl(),
 password: new FormControl()
}, { updateOn: 'submit' });

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

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

this.login = new FormGroup({
 email: new FormControl(null, {
 validators: Validators.required,
 updateOn: 'blur'
 }),
 password: new FormControl(null, [Validators.required])
}, {updateOn: 'submit'})

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

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

<input type="email" ngModel [ngModelOptions]="{updateOn: 'submit'}">

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

<form [ngFormOptions]="{updateOn: 'submit'}">
  <input name="email" ngModel type="email"> 
  <input name="password" ngModel type="email">
</form>

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

<form [ngFormOptions]="{updateOn: 'submit'}">
  <input name="email" ngModel 
 type="email" 
 [ngModelOptions]="{updateOn: 'blur'}"> 
  <input name="password" ngModel type="email">
</form>

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

Автор: Netanel Basal

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

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

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

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

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Научиться

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree