Угловая Реактивная Проверка формы Завершить Событие - PullRequest
Новая
       35

Угловая Реактивная Проверка формы Завершить Событие

0 голосов
/ 27 июня 2019

У меня есть реактивная форма, которая имеет около 10 полей с 2 ​​асинхронными проверками в каждом, и в этом я должен разработать функцию автосохранения, например, когда пользователь переходит с веб-сайта и возвращается позже, он получит то же состояние формы, гдеон ушел.когда данные автосохранения отображаются в пользовательском интерфейсе, они снова проверяют все поля.

Можно ли определить, когда все проверки формы завершены?

Ответы [ 2 ]

0 голосов
/ 28 июня 2019

Вы можете активировать это, используя угловые формы

реактивные формы 

profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
    aliases: this.fb.array([
      this.fb.control('')
    ])
  });

затем при отправке выможно получить все значения 

onSubmit() {
    // TODO: Use EventEmitter with form value
    console.log(this.profileForm.value);
  }

, затем вы можете сохранить его в Localstorage

localStorage

Следующий фрагмент получает доступ к локальному объекту Storage текущего домена и добавляетэлемент данных к нему с помощью Storage.setItem (). 

localStorage.setItem('formdata', this.profileForm.value);

Синтаксис для чтения элемента localStorage выглядит следующим образом: 

var cat = localStorage.getItem('formdata');

**

ОБНОВЛЕНО

**

Если вы хотите получить только статус, а не значение, вы можете использовать statusChanges: 

export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.statusChanges.subscribe(
        result => console.log(result)
    );
}

Если вы даже хотитеИзменения данных, вы можете подписаться на valueChanges формы и проверить статус формы, используя this.myForm.status: 

export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.valueChanges.subscribe(
        result => console.log(this.myForm.status)
    );
}

Возможные значения статуса: VALID , недействительно , в ожидании или отключено .

0 голосов
/ 28 июня 2019

Нечто подобное должно сработать 

this.form.statusChange(
   filter(status=>status==='VALID'),
   switchMap(_=>this.yourAutoSaveFunction(this.form.value))
).subscribe()
...