Покращуємо продуктивність з новою функцією updateOn в Angular v5

19

Від автора: в 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’ });

Або з валідацією:

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. Наприклад:

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

У наведеному вище прикладі обидва поля будуть оновлюватися по події submit, поки одному з елементів не буде явно задано своє значення для updateOn в ngModelOption. Приклад:

Дякую Kara Erickson за її детальні повідомлення.