Angular, FormControl - подтвердить изменение значения - PullRequest
Новая
       82

Angular, FormControl - подтвердить изменение значения

0 голосов
/ 28 мая 2020

У меня есть элемент управления формой для выбора какого-то значения (например - пол) и пары <input type="radio">. Требования следующие:

  1. Когда пользователь изменяет ввод, мне нужно показать модальное окно, которое просит его подтвердить или отменить изменения (без каких-либо действий).
  2. Мне нужно показывать модальное окно только в том случае, если пользователь меняет входное значение с одного пола на другой.

Моя проблема в том, что FormControl имеет только valueChanges событие, которое генерирует после значение уже было изменено. И мне нужно программно установить предыдущее значение: 

this.genderControl.setValue(GenderEnum.MALE, {emitEvent: false});

Пример псевдокода:

компонент. html

<input
  formControlName="gender"
  type="radio"
  value="female"
  id="female"
/>
<input
  formControlName="gender"
  type="radio"
  value="male"
  id="male"
/>
<input
  formControlName="gender"
  type="radio"
  value="other"
  id="other"
/>

component.ts 

this.genderControl.valueChanges
  .pipe(
    distinctUntilChanged(),
    startWith(null),
    pairwise(),
    takeUntil(this._destroy$)
  ).subscribe(([prev, next]: [GenderEnum, GenderEnum]) => {
    this.openWarningModal().afterClosed().subscribe((selectedAction: CommonModalsActionsEnum) => {
      if (selectedAction === CommonModalsActionsEnum.CONFIRM) {
        this.handleChangeGender(next);
      }

      if (selectedAction === CommonModalsActionsEnum.CLOSE) {
        this.genderControl.setValue(prev, {emitEvent: false});
      }
    });
  });

Возможное решение может заключаться в удалении FormControl с использованием ngModel и подписки на нажатие на ввод событие. Таким образом, обработчик кликов показывает модальное окно и изменяет или не меняет переменную, относящуюся к ngModel.

Но я надеюсь, что существует более ясное решение!

1 Ответ

1 голос
/ 28 мая 2020

Если вы планируете использовать ngModel, вместо подписки на событие клика вы можете подписаться на событие 

ngModelChanges()

, которое является @Output директивы ngModel. Срабатывает при смене модели.

...