В угловых 2 обещания были заменены на наблюдается , которые предлагают способ подписаться на изменения в асинхронном манера, а не разовые асинхронные действия. Наблюдаемые трансляции потока информации, которые можно прочитать любым объектом Это слушает значения, наблюдаемые вывод.
В комплект входят многие встроенные наблюдаемые в угловых 2, являются наблюдаемыми для подписки на изменения значения формы. Вы можете подписаться на отдельные входы формы или наблюдать за видом в целом, чтобы посмотреть на любые изменения. Я недавно преподавал классу онлайн для угловых 2, и, как забавное упражнение, которое я хотел подняться с практическим способом использовать изменения ценности формы, наблюдаемые (по крайней мере, для демонстрационных целей).
Я думал, что могу поделиться шагами, которые я прошел, чтобы сохранить значения формы в случае неожиданного перезагрузки страницы или закрытия окна браузера. Я знаю, что были времена, когда я случайно закрыл вкладку или вызвал ярлык перезагрузки в моем браузере, только для того, чтобы быть заполнены только вторым яростью, когда я понимаю, что форма, которую я только что заполнил, был полностью уничтожен.
Начиная
Во-первых, я только планирую объяснить концепции в угловых 2 формах, которые имеют отношение к этому примеру, но, пожалуйста, комментируйте Если у вас есть какие-либо вопросы, или вы можете проверить Руководство по форм в угловая документация. Кроме того, если вы уже несколько знакомы с формами в рамках, мы будем строить модель, управляемая Форма, в отличие от шаблон, управляемый форма.
Создание формы в HTML
Мы будем создавать компонент, чтобы позволить пользователю подписаться на рассылку для рассылки по почте по адресу их выбора. Начиная с шаблона HTML, который мы увидим название Newsletter.comPonent.html , у нас есть
что дает нам
Угловые формы – это коллекция FormControl Объекты, связанные с HTML через Теги и FormControlName атрибут на этих тегах. FormControl Объекты группируются, ну, а Форменная группа объект. А Форменная группа представлен В HTML как и или верхний уровень <ФОРМА> тег. А Форменная группа может быть вложен внутри другого Форменная группа как Мы видим выше, а верхний уровень <ФОРМА> связан с верхним уровнем Форменная группа по [Формагрупп] атрибут, тогда как вложенные связан с вложенным Форменная группа с FormgroupName атрибут.
Создание формы программно
Если вышеуказанное объяснение все еще немного нечеткое, надеюсь, этот следующий шаг поможет вам сделать его лучше. Нам нужен JavaScript Форма объекта, чтобы связать Форму HTML, чтобы давайте сделаем это внутри нашего NewsletterComponent класс.
import { Component, OnInit } from '@angular/core';
import {
FormGroup,
Validators,
FormBuilder
} from '@angular/forms';
@Component({
selector: 'newsletter',
templateUrl: './newsletter.component.html'
})
export class NewsletterComponent implements OnInit {
registerForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.registerForm = this.formBuilder.group({
firstName: ['', [Validators.required, Validators.minLength(8)]],
lastName: ['', Validators.required],
emailAddress: ['', Validators.required],
address: this.formBuilder.group({
street: ['', Validators.required],
zip: ['', Validators.required],
city: ['', Validators.required]
})
});
...
}
Надеюсь, код выше, поможет вам понять, почему форма HTML построен так, как она есть. У нас есть верхний уровень Форменная группа , Зарегистрироваться переменная, и когда компонент инициализируется, мы строим форму как Форменная группа С вложенным FormControl Значения (и вложенные Формугруппу тоже). Значения массива имеют значение по умолчанию для FormControl как первый элемент, и любая проверка (ы) как второй элемент. Обратите внимание, что встроенный FormBuilder Сервис инициализирует значения как Форменная группа или FormControl Соответственно, Хотя мы не ясно не видим значения, определяемые как новые экземпляры этих классов здесь.
Подписка на изменения значения
Наконец, мы закончили с установкой и можем начать строить наш механизм для сохранения значений формы. Ради этой демонстрации, мы сохраним Значения формы к встроенному браузеру в SessionStorage И удалите эти значения из хранилища, когда форма отправляется по вызову Unsermormvalues () Функция, связанная с (Отправить) атрибут на <ФОРМА> тег.
В нижней части нашего Ngoninit () Функция Мы добавим следующее:
ngOnInit() {
...
this.
registerForm.
valueChanges.
subscribe(form => {
sessionStorage.setItem('form', JSON.stringify(form));
});
}
Давайте сломаемся частью. Во-первых, у нас есть ValueChanges Вызов быть сделанным на Зарегистрироваться объект. ValueChanges ссылка на наблюдаемый мы подписываемся, на что мы делаем на следующей строке. Наблюдаемый добавлен в соответствии с Зарегистрироваться Быть экземпляром из Форменная группа класс. Значение, которое передается в Подписаться () Обратный вызов, Форма , это просто объект JavaScript.
{
firstName: "",
lastName: "",
emailAddress: "",
address: {
city: "",
state: "",
zip: ""
}
}
В качестве значения формы изменяются, эта же структура объекта будет передана в подписку с обновленными значениями формы. Мы получаем SessionStorage Объект из браузера, и мы связываем ценные значения формы к ключу в хранилище, в этом случае «Форма» Отказ Мы столкнемся к проблемам, пытающимся сохранить Объект как есть, так что мы Stringify () Объект ценностей формы перед сохранением его.
Получение значений формы
Как только мы начали заполнять форму, мы можем проверить, что значения хранятся в хранилище сеанса браузера. Большой! Теперь, если мы перезагрузим Страница, нам нужно вытянуть эти значения из хранения и применить их к каждому из FormControl значения. Во-первых, давайте добавим несколько строк выше нашего valueschanges Подписка в Ngoninit () функция.
ngOnInit() {
...
let formValues = sessionStorage.getItem('form');
if (formValues) {
this.applyFormValues(this.registerForm, JSON.parse(formValues));
}
...
}
Все, что мы делаем здесь, проверка, если есть «Форма» Ключ, существующий в SessionStorage И если есть, поверните значение обратно в объект Использование Json.parse () и пройти этот объект и Зарегистрироваться объект в функцию ApplyFormValues () Отказ Теперь давайте добавим новый Частный Функция к компоненту под названием ApplyFormValues () Отказ
private applyFormValues (group, formValues) {
Object.keys(formValues).forEach(key => {
let formControl = group.controls[key];
if (formControl instanceof FormGroup) {
this.applyFormValues(formControl, formValues[key]);
} else {
formControl.setValue(formValues[key]);
}
});
}
Мы иверируемся над каждым из ключей в наших ценностях формы объектом и привлечь его соответствующие FormControl от Группа аргумент, который наш Зарегистрироваться в таком случае. Отсюда мы либо устанавливаем значение FormControl используя setValue () функция или проверьте, чтобы увидеть, если наш FormControl на самом деле Форменная группа Отказ
Форменная группа это подкласс FormControl Так что если это действительно instanceof formgroup нам нужно рекурсивно позвонить наше ApplyFormValues () Функция, на этот раз проходит в Наш вложенный Форменная группа ( Адрес ) вместо нашего верхнего уровня Форменная группа это представляет наше Зарегистрироваться Отказ Поэтому, как только наша функция попадает в Адрес Ключ и обнаруживает это на самом деле Форменная группа , он снова пройдет этот вложенный объект в функцию, чтобы повторить каждый из Адрес Клавиши объекта и установите значения Город , Государство , и Zip Отказ
Похоже, наши ценности формы пережили страницу перезагрузить! Чтобы заканчивать вещи, давайте добавим быструю функцию, чтобы удалить значения формы из SessionStorage Как только мы отправим форма.
destroyFormValues() {
sessionStorage.removeItem('form');
alert('Saved form data deleted');
}
Теперь, когда мы отправляем форму, мы увидим предупреждение, информирующую нам сохраненные данные формы были удалены. Когда страница перезагружается, мы можем подтвердить, что значения были удалены от SessionStorage Отказ
Заключение
Формы в угловых 2 довольно мощны, и вы можете сделать некоторые аккуратные вещи с ними. Я надеюсь, что в этом забавном упражнении вы пришли лучше понять формы, ориентированные на модель в Рамки, а также о том, как наблюдаемые заметки могут быть использованы для подписки на образование значения изменений. Помните, каждый FormControl можно наблюдать, а не только весь Форма, поэтому обнаружение изменений в формах может быть еще более нюансом, чем то, что мы показали. Пожалуйста, опубликуйте любые вопросы или комментарии и счастливые кодировки! здесь…