根据其他表单控件更新Angular Reactive Form禁用字段的值

提问于 2024-04-26T07:32:13+08:00

浏览次

1

我在Angular中使用Reactive Forms，并且具有基于其他字段/表单控件的值计算的禁用表单控件 . 如何更新该禁用字段的值，因为它的相关字段的值会更改 . 计算正在进行，但我需要它来订阅其他字段的更改 . 我创建FormGroup的函数如下所示：

createBasket(basket: any) {
    return new FormGroup({
      length: new FormControl(basket.length),
      width: new FormControl(basket.width),
      height: new FormControl(basket.height),
      crossSectArea: new FormControl({value: basket.length * basket.width * basket.height, disabled: true}, Validators.required)
    });
  }

不确定这是否会改变解决方案，但我也使用FormArray创建表单组实例的数组 .

1 回答

2
FormControl API公开了一个valueChanges observable，你可以订阅它，然后使用setValue方法强制设置订阅块中另一个表单控件的值：
```
ngOnInit() {
  this.basketForm = createBasket(basket);
  const length = this.basketForm.get('length');
  const width = this.basketForm.get('width');
  length.valueChanges.subscribe(val => {
    width.setValue(val * 2);
  });
}
```
工作示例：https://stackblitz.com/edit/interdependent-form-controls .
回复于 2024-04-26T07:32:13+08:00

相关问题