Question

我有3个字段与类型为数字的表单链接，当我修改字段A时，它修改字段B和C，当我修改字段B时，它修改字段A和C，当我修改字段C时，它修改字段A和C。 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()"/>

当您修改一个字段时，问题就来了，它进入循环并导致应用崩溃。

我已经尝试在我的emitEvent: false中添加参数setValue()，但是它什么也没改变

所以我的问题是：有没有办法防止其他功能的触发？修改fieldA时，我只想输入我的onFieldAchanged()函数并设置其他两个值，就不用了。

谢谢您的帮助

Answer 1

确定是：

首先，使用(ngModelChange)而不是valueChanges：

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与反应形式混合在一起。必须选择一个。

Answer 2

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

Answer 3

很奇怪，我自己实际上做了类似的事情：

我所做的是将两个表格分组：

    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">

有没有一种方法可以防止formControl触发事件？

3 个答案: