根据其他表单控件更新 Angular 反应式表单禁用字段的值

Question

我在 Angular 中使用 Reactive Forms，并且有一个禁用的 Form Control，它是根据其他 fields/Form 控件的值计算的。当它的依赖字段的值发生变化时，我如何更新该禁用字段的值。计算正在运行，但我需要它来订阅其他字段的更改。我创建 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 创建一个 Form Group 实例数组。

Answer 1

在订阅块中强制设置其他表单控件的值的FormControl API exposes a valueChanges observable which you can subscribe to and then use the 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.

根据其他表单控件更新 Angular 反应式表单禁用字段的值

Update Value of Angular Reactive Form disabled field based on other Form Controls

angular

typescript

angular-reactive-forms

angular-forms

angular-validation