Angular FormGroup - автоматически делит значение из другого поля на 100

Question

У меня есть 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)
  );