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

Question

我有 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()"/>

当您修改其中一个字段时就会出现问题，它会进入循环并导致应用程序崩溃。

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

所以我的问题是:有没有办法防止触发其他功能？当我修改 fieldA 时，我只想进入我的 onFieldAchanged() 函数并设置其他两个值，仅此而已。

谢谢你的帮助

Answer 1

肯定有:

首先，不使用 (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 函数中以阻止它们的 valueChanges 发出:

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

问题是将 ngModel 与 react 形式混合在一起。必须选择一个。