Angular FormGroup - 自动将另一个字段的值除以 100

Question

我在一个 angular 表单组中有 3 个字段，其中一个字段基本上是用户的一个工具，可以自动从另一个字段中划分值。因此，用户键入一个数字，另一个字段会自动显示该值除以 100。

看起来像这样：

formGroup = new FormGroup({
        Buildyear:           new FormControl(this.buildyear, [Validators.minLength(4), Validators.maxLength(4)]),
        Areasize:            new FormControl(this.areasize, [Validators.required] ),
        Areasize_divided:    new FormControl(''),
     });

"Areasize_divided" 会自动除掉 "Areasize" 中的值，默认情况下该字段中已经有一个值，但是如果用户在 "Areasize" 中输入一个新值，那应该是自动的也在 "Areasize_divided" 中计算。反过来，如果用户在 "Areasize_divided" 中输入一个值，它会自动将 "Areasize" 乘以 100。

实现这样的目标的最佳方式是什么？

Answer 1

您应该监听表单控件的更改并相应地更新您的其他控件。

formGroup.get('Areasize')
  .valueChanges
  .subscribe(value => formGroup
    .get('Areasize_divided')
    .setValue(isNaN(value) ? 0 : value / 100)
  );

Angular FormGroup - 自动将另一个字段的值除以 100

Angular FormGroup - Automatically divide value from another field by 100

javascript

angular

typescript

calculated-field