在Angular中停止无限循环反应形式控制更新

问题描述 投票:1回答:3

我在表单上有2个输入,一个名为“ageMonths”的数字输入和一个名为“dateOfBirth”的日期选择器。

我希望用户能够输入一个月份的月份,或者使用日期选择器来选择出生日期(dob)。如果他们从日期选择器输入dob,我希望month字段更新为以月为单位的年龄。如果他们输入几个月的年龄,我希望日期选择器跳转到该日期。我正在使用反应形式。

我添加了一个类级别变量来保存一个切换,每次为任一控件更改值时,都会读取和设置切换。但是这没有按预期工作,我假设由于事件没有按照我期望的顺序触发。

我需要做些什么来完成这项工作?

我的代码是:

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;
});
}
angular rxjs angular-reactive-forms
3个回答
0
投票

我正在回答这个问题,因为我已经通过在我的setValue调用中添加{emitEvent: false}选项来获得所需的行为:

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

但我仍然想知道为什么如果有人能解释,切换字段没有按预期工作?


0
投票

你在错误的时间将标志设置为false,所以它什么都不做。你将它设置为true,然后几乎立即设置为false。当第二个表单控件获得值更改时,它将始终为false。

这样做(对于两个控件):

this.form.get('dateOfBirth').valueChanges.subscribe(
  dob => {
      if (ignoreDateUpdates) {
        ignoreDateUpdates = false;
        return;
      };
      ignoreDateUpdates = true;
      <code to set MonthsInput>
  });

0
投票

我也在我的应用程序中实现了这种功能,我有两个输入框,一个是小时,第二个是分钟,每当用户输入数小时,然后我将小时转换为分钟和更新分钟输入框,当用户输入分钟输入框时输入我将分钟转换为小时并更新小时输入框。

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;
      }    
});
    }
© www.soinside.com 2019 - 2024. All rights reserved.