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

我在表单上有两个输入，一个称为“AGEMONTS”的数字输入和一个称为“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;
});
}

ignoreDateUpdate=false；
表格：表格组；
...
构造函数（…）{
this.form=new FormGroup({
dateOfBirth:new FormControl（{value:new Date（）}），
AGEMONTS:新FormControl（{value:0}），
...
});
...
this.form.get（'ageMonths'）.valueChanges.subscribe(
m=>{
if（ignoreDateUpdates）{return}；
ignoreDateUpdates=true；
<设置DateSelectorValue的代码>
ignoreDateUpdates=false；
});
this.form.get（'dateOfBirth'）.valueChanges.subscribe(
dob=>{
if（ignoreDateUpdates）{return}；
ignoreDateUpdates=true；
<设置月输入的代码>
ignoreDateUpdates=false；
});
}

我之所以回答这个问题，是因为我通过向我的setValue调用添加

{emitEvent:false}

选项获得了所需的行为：

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

const calcDate=；
setValue（calcDate，{emitEvent:false}）；

---

但我还是想知道，如果有人能够解释的话，为什么切换字段没有按预期工作？

您在错误的时间将标志设置为false，因此它没有任何作用。你几乎马上把它设为真，然后又设为假。当第二个表单控件的值发生更改时，它将始终为false

执行此操作（对于两个控件）：

this.form.get（'dateOfBirth'）.valueChanges.subscribe(
dob=>{
如果（忽略日期更新）{
ignoreDateUpdates=false；
回来
};
ignoreDateUpdates=true；
<设置月输入的代码>
});

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

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;
      }    
});
    }

private ignoreDateUpdates=true；
this.form.get（'ageMonths'）.valueChanges.subscribe（m=>{
如果（忽略日期更新）{
ignoreDateUpdates=false；
<设置DateSelectorValue的代码>
}
否则{
ignoreDateUpdates=true；
}       
});
this.form.get（'dateOfBirth'）.valueChanges.subscribe(
dob=>{
如果（忽略日期更新）{
ignoreDateUpdates=false；
<设置月输入的代码>
}
否则{
ignoreDateUpdates=true；
}    
});
}

这帮助我找到了与此相关的所需内容。。。特别是从返回调用到更新函数的更新数据。有时，您需要在表单模型中获取新数据，但不希望它触发

valueChanges

否则更新会循环。对我来说，使用

this.formRef.form.patchValue（someObject，{emitEvent:false}）

是一种神奇的调味品！

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;
      }    
});
    }