Блог

Главная - Вопросы по программированию - Как отправить только один запрос после сброса нескольких полей?

Как отправить только один запрос после сброса нескольких полей?

#angular #rxjs #angular-reactive-forms

#angular #rxjs #angular-реактивные формы

Вопрос:

Я использую реактивные формы и пытаюсь сбросить 5 определенных полей, но моя форма прослушивает любые изменения и отправляет запрос. И если я сброшу 5 полей, моя форма отправит 5 запросов. Но я хочу отправить только один запрос после всех изменений.

 this.subs = form.get('city').valueChanges.subscribe(city => {
            form.get('property').reset(null, {
              emitEvent: false,
              onlySelf: true
            });

            form.get('cars').reset(null, {
              emitEvent: false,
              onlySelf: true
            });

            form.get('tariff').reset(null, {
              emitEvent: false,
              onlySelf: true
            });

            form.get('version').reset(null, {
              emitEvent: false,
              onlySelf: true
            });
          });

Что я делаю не так?

PS: Я использую ngx-formly для организации форм.

Комментарии:

1. Куда вы отправляете запросы?

2. Вы можете создать новый для вместо сброса всех свойств.

3. @xyz существует подписка на изменение каждого поля в форме. Это не имеет значения.

4. @shadowman_93 Я не сбрасываю все свойства. Я сбрасываю только 5 свойств из 8.

5. @panay не имеет значения? пожалуйста, покажите нам полный код, вы говорите, что отправляется 5 запросов, покажите нам, куда вы их отправляете?

Ответ №1:

Должно быть, проблема вызвана чем-то сверх того, что вы указали. Что-то вроде этого работает нормально:

  form = new FormGroup({
    a: new FormControl('a'),
    b: new FormControl('b'),
    c: new FormControl('change me'),
  });

  ngOnInit() {
    this.subs = [
      this.form.valueChanges.subscribe(v => console.log('form value change', v)),
      this.form.get('c').valueChanges.subscribe(() => { 
        console.log('reset');

        this.form.get('a').reset('d', { emitEvent: false });
        this.form.get('b').reset('e', { emitEvent: false });
      }),
    ];
  }

вот рабочий stackblitz:https://angular-awifgk.stackblitz.io