Від автора: в 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’ });
У наведеному вище прикладі обидва поля будуть оновлюватися по події 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 за її детальні повідомлення.
