Angular 有没有办法防止formControl触发事件？

我有3个字段与表单链接，类型为数字，当我修改字段A时，它修改字段B和C，当我修改字段B时，它修改字段A和C，当我修改字段C时，它相应地修改字段A和B

我的组件如下所示：

this.form= this.formBuilder.group({
   fieldA: new FormControl(this.valueA),
   fieldB: new FormControl(this.valueB),
   fieldC: new FormControl(this.valueC),
});

onFieldAchanged() {
   //Do some calculs
   this.form.get('fieldB').setValue(x);
   this.form.get('fieldC').setValue(y);
}

onFieldBchanged() {
   //Do some calculs
   this.form.get('fieldA').setValue(x);
   this.form.get('fieldC').setValue(y);
}

onFieldCchanged() {
   //Do some calculs
   this.form.get('fieldA').setValue(x);
   this.form.get('fieldB').setValue(y);
}

<input formControlName="fieldA" type="number" class="form-control" (ngModelChange)="onFieldAchanged()"/>
<input formControlName="fieldB" type="number" class="form-control" (ngModelChange)="onFieldBchanged()"/>
<input formControlName="fieldC" type="number" class="form-control" (ngModelChange)="onFieldCchanged()"/>

我的模板如下：

this.form= this.formBuilder.group({
   fieldA: new FormControl(this.valueA),
   fieldB: new FormControl(this.valueB),
   fieldC: new FormControl(this.valueC),
});

onFieldAchanged() {
   //Do some calculs
   this.form.get('fieldB').setValue(x);
   this.form.get('fieldC').setValue(y);
}

onFieldBchanged() {
   //Do some calculs
   this.form.get('fieldA').setValue(x);
   this.form.get('fieldC').setValue(y);
}

onFieldCchanged() {
   //Do some calculs
   this.form.get('fieldA').setValue(x);
   this.form.get('fieldB').setValue(y);
}

<input formControlName="fieldA" type="number" class="form-control" (ngModelChange)="onFieldAchanged()"/>
<input formControlName="fieldB" type="number" class="form-control" (ngModelChange)="onFieldBchanged()"/>
<input formControlName="fieldC" type="number" class="form-control" (ngModelChange)="onFieldCchanged()"/>

当你修改其中一个字段时，问题就出现了，它进入了一个循环，使应用程序崩溃

我已经尝试在我的setValue中添加参数emitEvent:false，但它没有改变任何内容

所以我的问题是：有没有办法防止触发其他功能？当我修改fieldA时，我只想在onFieldAchanged函数中输入并设置其他两个值，而不是更多

---

谢谢你的帮助

奇怪，我自己也做过类似的事情：

我做的是分成两组：

    this.groupA = this.formBuilder.group({
        fieldA: new FormControl(''),
    });

    this.groupB = this.formBuilder.group({
        fieldB: new FormControl(''),
    });

然后我设置fieldA的值改变会导致fieldB的值改变：

ngOnInit(){
    this.groupA.get('fieldA').valueChanges.subscribe(val => {
        this.groupB.get('fieldB').setValue(val);
    });
}

然后在我的模板中，fieldA的值设置为fieldB，以完成同步：

<input matInput placeholder="Field A:" formControlName="fieldA [value]="groupB.get('fieldB').value">

---

奇怪的是，我自己也做过类似的事情：

我做的是分成两组：

    this.groupA = this.formBuilder.group({
        fieldA: new FormControl(''),
    });

    this.groupB = this.formBuilder.group({
        fieldB: new FormControl(''),
    });

然后我设置fieldA的值改变会导致fieldB的值改变：

ngOnInit(){
    this.groupA.get('fieldA').valueChanges.subscribe(val => {
        this.groupB.get('fieldB').setValue(val);
    });
}

然后在我的模板中，fieldA的值设置为fieldB，以完成同步：

<input matInput placeholder="Field A:" formControlName="fieldA [value]="groupB.get('fieldB').value">

当然有：

首先，不要使用ngModelChange，而是使用valueChanges observable：

this.form.get('fieldA').valueChanges.subscribe(v => this.onFieldAchanged());
this.form.get('fieldB').valueChanges.subscribe(v => this.onFieldBchanged());
this.form.get('fieldC').valueChanges.subscribe(v => this.onFieldCchanged());

然后，将emitEvent选项添加到setValue功能中，以阻止其值更改发出：

onFieldAchanged() {
   //Do some calculs
   this.form.get('fieldB').setValue(x, {emitEvent: false});
   this.form.get('fieldC').setValue(y, {emitEvent: false});
}

问题是将NGM模型与反应形式相混合。必须选择一个。

当然有：

首先，不要使用ngModelChange，而是使用valueChanges observable：

this.form.get('fieldA').valueChanges.subscribe(v => this.onFieldAchanged());
this.form.get('fieldB').valueChanges.subscribe(v => this.onFieldBchanged());
this.form.get('fieldC').valueChanges.subscribe(v => this.onFieldCchanged());

然后，将emitEvent选项添加到setValue功能中，以阻止其值更改发出：

onFieldAchanged() {
   //Do some calculs
   this.form.get('fieldB').setValue(x, {emitEvent: false});
   this.form.get('fieldC').setValue(y, {emitEvent: false});
}

---

问题是将NGM模型与反应形式相混合。必须选择一个。

您可以轻松地在模板中的onfildexchanged函数中传递一个参数，并检查此字符串，以查看事件是由键入的输入触发的还是由其他事件触发程序触发的。只需做一个防护。

您可以轻松地在模板中的onfildexchanged函数中传递一个参数，并检查此字符串，以查看事件是由键入的输入触发的还是由其他事件触发程序触发的。做一个警卫。

也许你应该调查撞车问题，而不是阻止它发生。您的应用程序应该能够有输入。是的，但每次我更改值时都像这样循环似乎不是正常的用例。否？您是否尝试过在被动表单上使用补丁值？为什么在使用表单控件时使用ngModelChange事件？这可能就是为什么emitEvent看起来没有效果的原因。尝试改用表单控件上可观察到的valuechanges。@Nicolas在应用程序中创建一个无限循环，在更新输入值和触发事件时触发更改检测，这将始终导致崩溃。您可能应该调查崩溃问题，而不是阻止它发生。您的应用程序应该能够有输入。是的，但每次我更改值时都像这样循环似乎不是正常的用例。否？您是否尝试过在被动表单上使用补丁值？为什么在使用表单控件时使用ngModelChange事件？这可能就是为什么emitEvent看起来没有效果的原因。尝试改用表单控件上可观察到的valuechanges。@Nicolas在应用程序中创建一个无限循环，在更新输入值和触发事件时触发更改检测，这将始终使其崩溃