Остановить обновление контроля реактивных форм бесконечного цикла в Angular - PullRequest
Новая
       19

Остановить обновление контроля реактивных форм бесконечного цикла в Angular

1 голос
/ 12 апреля 2019

У меня есть 2 ввода в форме, числовой ввод с именем ageMonths и селектор даты с именем dateOfBirth.

Я хочу, чтобы пользователь мог вводить месяцы для возраста или использовать селектор даты, чтобы выбрать дату рождения (dob). Если они вводят dob из селектора даты, я хочу обновить поле месяца до возраста в месяцах. Если они вводят возраст в месяцах, я хочу, чтобы селектор даты перешел на эту дату. Я использую реактивные формы.

Я добавил переменную уровня класса для хранения переключателя, который читается и устанавливается каждый раз, когда значение изменяется для любого элемента управления. Но это работает не так, как ожидалось, я полагаю из-за событий, которые не запускаются в том порядке, в котором я их ожидаю.

Что мне нужно сделать, чтобы эта работа?

Мой код: 

ignoreDateUpdate = false;
form: FormGroup;
...
constructor(...){
this.form = new FormGroup({
    dateOfBirth: new FormControl({ value: new Date()}),
    ageMonths: new FormControl({ value: 0 }),
    ...
});
...
this.form.get('ageMonths').valueChanges.subscribe(
m => {
    if (ignoreDateUpdates) {return};
    ignoreDateUpdates = true;
    <code to set DateSelectorValue>
    ignoreDateUpdates = false;
    });
this.form.get('dateOfBirth').valueChanges.subscribe(
dob => {
    if (ignoreDateUpdates) {return};
    ignoreDateUpdates = true;
    <code to set MonthsInput>
    ignoreDateUpdates = false;
});
}

Ответы [ 3 ]

0 голосов
/ 12 апреля 2019

Вы устанавливаете флаг в ложное время, поэтому он ничего не делает.Вы устанавливаете его в true, а затем в false почти сразу.Это всегда будет ложно, когда второй элемент управления формы получает изменения значения.

Сделайте это (для обоих элементов управления): 

this.form.get('dateOfBirth').valueChanges.subscribe(
  dob => {
      if (ignoreDateUpdates) {
        ignoreDateUpdates = false;
        return;
      };
      ignoreDateUpdates = true;
      <code to set MonthsInput>
  });
0 голосов
/ 12 апреля 2019

Я также реализовал такую ​​функцию в своем приложении, у меня есть два поля ввода: один час, а второй минуты, когда пользователь вводит значение в часах, затем я конвертирую час в минуты и обновляю поле ввода минут, когда пользователь вводит минуты в минутах.поле ввода, затем я конвертирую минуты в часы и обновляю поле ввода часа.

private  ignoreDateUpdates=true;        
this.form.get('ageMonths').valueChanges.subscribe(m => {
        if (ignoreDateUpdates) {
        ignoreDateUpdates = false;
        <code to set DateSelectorValue>
         }
        else{
      ignoreDateUpdates = true;
         }       
 });
    this.form.get('dateOfBirth').valueChanges.subscribe(
    dob => {
        if (ignoreDateUpdates) {
        ignoreDateUpdates = false;
        <code to set MonthsInput>
       }
        else{
        ignoreDateUpdates = true;
      }    
});
    }
0 голосов
/ 12 апреля 2019

Я отвечаю на это, поскольку у меня есть необходимое поведение, добавив опцию {emitEvent: false} к моим вызовам setValue: 

const calcDate = <calculate date from months value>;
this.form.get('dateOfBirth').setValue(calcDate, { emitEvent: false });

Но я все же хотел бы знать, почему поле переключения не работает должным образом, если кто-нибудь может объяснить?

...