Angular 严格类型形式 - 为什么我不从 values 属性中获取当前值

Question

我正在开发一个 Angular 15 应用程序，我在其中创建了一个严格类型化的表单。我遇到了一个问题，我试图使用

this.formData.values.firstName

约定来获取 FormGroup 中 firstName 控件的当前值。相反，我得到一个空值。但是，如果我使用以下任一约定，我会得到当前输入到相应 FormControl 的输入控件中的内容

this.formData.get('firstName').value // works
this.formData.controls.firstName.getRawValue() // works

不幸的是，我一直在我的 .ts 文件中使用

this.formData.get('firstName').value

风格，但后来以我无限的智慧认为使用更直接的方法会更好——现在发现这是一个错误，看起来我需要把他们都回来了。只是不明白为什么！

顺便说一句：我还使用了一个从 FormGroup 扩展的接口来容纳 FormGroup 本身的定义，并且我正在使用 FormBuilder 来设置

this.formData

——不确定这些是否与此处相关。

export interface IPerson {
    firstName: string;
}

export interface IPersonForm
    extends FormGroup<{
        firstName: FormControl<string|undefined>;
}> {}

...

externalData: IPerson;
formData!: IPersonForm;

...

this.formData = this.formBuilder.group({
    firstName: this.formBuilder.control(this.externalData?.firstName, Validators.required),
});

知道我做错了什么或误解了什么吗？

谢谢！

编辑：同样值得注意的是，可能是我试图获取控件当前值的代码区域，它是在

this.formData.controls.firstName.valueChanges.subscribe((val)=>...)

触发时调用的方法，如果我

console.log('change', val)

，它有价值。我觉得严格类型化的表单处理 FormControl 值更新的方式有些不同。

编辑 2：如果我在组件的 html 文件中放入

{{formData.value.firstName}}

，它会显示值，而不是 null...