如何刷新FormGroup以获取表单字段的最新值

为啥会出现这种情况？你在模板里直接调用formGroup.get('firstname').value做判断时，Angular的变更检测机制没法及时感知到表单值的变化，导致始终读取的是旧值。本质是get()返回的控件对象的value属性，在模板里直接访问时，Angular不会自动追踪它的内部更新。

下面给你几个可行的解决办法：

方案1：用控件的valueChanges订阅更新（首推） #

在组件类里订阅表单控件的valueChanges，把最新值存到组件的一个属性里，模板直接绑定这个属性就行：

组件类代码：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  formGroup!: FormGroup;
  currentFirstname!: string;

  ngOnInit(): void {
    this.formGroup = new FormGroup({
      firstname: new FormControl('John')
    });

    // 监听名字变化，更新组件内的属性
    this.formGroup.get('firstname')?.valueChanges.subscribe(newValue => {
      this.currentFirstname = newValue;
    });
  }
}

模板代码修改为：

<my-component *ngIf="currentFirstname === 'John'">
  <div>Hello John</div>
</my-component>

方案2：模板里直接用async管道结合valueChanges #

不想在组件里写订阅逻辑的话，直接在模板里用async管道订阅valueChanges也可行：

<my-component *ngIf="(formGroup.get('firstname')?.valueChanges | async) === 'John'">
  <div>Hello John</div>
</my-component>

如果输入频繁，建议加debounceTime防抖，避免不必要的视图触发：

<my-component *ngIf="(formGroup.get('firstname')?.valueChanges | debounceTime: 100 | async) === 'John'">
  <div>Hello John</div>
</my-component>

方案3：手动触发变更检测 #

要是你非得保留原来的模板写法，可以在组件里注入ChangeDetectorRef，在值变化时手动触发变更检测：

组件类代码：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  formGroup!: FormGroup;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.formGroup = new FormGroup({
      firstname: new FormControl('John')
    });

    this.formGroup.get('firstname')?.valueChanges.subscribe(() => {
      this.cdr.detectChanges(); // 手动通知Angular更新视图
    });
  }
}

模板继续使用你原来的写法即可。

额外小建议 #

别在模板里反复调用formGroup.get()，建议在组件类里提前把控件引用存好：

firstnameControl!: FormControl;

ngOnInit(): void {
  this.formGroup = new FormGroup({
    firstname: new FormControl('John')
  });
  this.firstnameControl = this.formGroup.get('firstname') as FormControl;
}

之后模板里直接用firstnameControl.value，既提升可读性也能优化性能。

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