От автора: в Angular функции добавляются и развиваются, что мы и сможем наблюдать в версии 5 . В этой статье я расскажу про полезную функцию, добавленную в Angular Forms API — опция updateOn. По умолчанию при изменении значения FormControl Angular запускает процесс валидации. Например, у вас есть поле ввода, ограниченное формой, тогда Angular будет проводить валидацию для каждого нажатия клавиши.
Проблема
Представьте форму с большими требованиями к валидации. Обновление по каждому нажатию может сказаться на производительности.
К счастью Angular 5 представляет новую опцию, которая повышает производительность за счет задержки обновлений до срабатывания событий blur и submit.
Применение в Reactive Forms
Для применения в Reactive Forms необходимо задать опцию updateOn в значение blur или submit при создании нового объекта FormControl (по умолчанию опция задана в change)
|
1 |
this.email = new FormControl(null, { updateOn: 'blur' }); |
Или с валидацией:
|
1 2 3 4 |
this.email = new FormControl(null, { validators: Validators.required, updateOn: 'blur' }); |
При работе с FormGroup или FormArray мы можем использовать это для установки значений по умолчанию updateOn для всех дочерних элементов формы. Например:
|
1 2 3 4 |
this.login = new FormGroup({ email: new FormControl(), password: new FormControl() }, { updateOn: 'submit' }); |
В примере выше оба поля будут обновляться по событию submit, пока один из дочерних элементов не будет явно задан в другое значение для updateOn. Например:
|
1 2 3 4 5 6 7 |
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. Например:
|
1 |
<input type="email" ngModel [ngModelOptions]="{updateOn: 'submit'}"> |
Также можно установить значения по умолчанию для updateOn для всех дочерних элементов формы. Например:
|
1 2 3 4 |
<form [ngFormOptions]="{updateOn: 'submit'}"> <input name="email" ngModel type="email"> <input name="password" ngModel type="email"> </form> |
В примере выше оба поля будут обновляться по событию submit, пока одному из элементов не будет явно задано свое значение для updateOn в ngModelOption. Пример:
|
1 2 3 4 5 6 |
<form [ngFormOptions]="{updateOn: 'submit'}"> <input name="email" ngModel type="email" [ngModelOptions]="{updateOn: 'blur'}"> <input name="password" ngModel type="email"> </form> |
Благодарю Kara Erickson за ее детальные сообщения.
Автор: Netanel Basal
Источник: //netbasal.com/
Редакция: Команда webformyself.
