Angular响应式表单输入变更时如何更新关联变量值？

你当前的问题在于age和check变量是组件初始化时一次性计算的，后续name表单控件的值发生变化时，这两个变量不会自动重新计算，自然也就不会更新显示。

这里提供两种常用的解决方式：

方式一：通过订阅valueChanges监听值变化 #

借助FormControl的valueChanges可观察对象，每次日期值更新时重新计算年龄和年份：

修改后的components.ts代码：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent implements OnInit {
  name = new FormControl(new Date());
  age = 0;
  check = 0;

  ngOnInit(): void {
    // 初始化时先计算一次初始值
    this.updateValues();
    // 订阅日期控件的变化，实时更新计算结果
    this.name.valueChanges.subscribe(() => {
      this.updateValues();
    });
  }

  private updateValues(): void {
    const birthDate = this.name.value as Date;
    if (birthDate) {
      this.check = birthDate.getFullYear();
      this.age = new Date().getFullYear() - this.check;
    }
  }
}

方式二：使用getter属性（更简洁） #

把age和check定义为getter属性，这样模板每次访问它们时都会重新计算，自动响应控件值的变化：

修改后的components.ts代码：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl(new Date());

  // 实时计算年龄
  get age(): number {
    const birthDate = this.name.value as Date;
    return birthDate ? new Date().getFullYear() - birthDate.getFullYear() : 0;
  }

  // 实时获取出生年份
  get check(): number {
    const birthDate = this.name.value as Date;
    return birthDate ? birthDate.getFullYear() : 0;
  }
}

另外注意：你的模板代码里<input>标签的[ng]是无效属性，建议删除，避免控制台出现不必要的报错。

内容的提问来源于stack exchange，提问作者Blackhole