如何订阅父表单中独立表单输入框的valueChanges？

方法一：通过模板引用变量+ViewChild获取NgModel实例 #

先给input添加模板引用变量（比如#nameInput="ngModel"），以此在组件类中获取该ngModel对应的FormControl实例：

修改后的HTML代码：

<mat-form-field>
 <mat-label for="userName">Name</mat-label>
 <input id="userName" 
   [ngModel]="name" 
   (ngModelChange)="updateName($event)" 
   [ngModelOptions]="{standalone: true}"
   #nameInput="ngModel"
</mat-form-field>

然后在组件类中，通过ViewChild获取该NgModel实例，并在ngAfterViewInit生命周期钩子中订阅它的control.valueChanges：

import { Component, ViewChild, NgModel, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  name: string = '';

  @ViewChild('nameInput') private nameInputModel!: NgModel;

  ngAfterViewInit(): void {
    this.nameInputModel.control.valueChanges.subscribe(newValue => {
      console.log('输入的名称变化了:', newValue);
      // 这里添加你的业务逻辑处理
    });
  }

  updateName(event: string) {
    this.name = event;
  }
}

方法二：直接使用FormControl替代ngModel（更推荐） #

既然是独立字段，直接用响应式表单的FormControl会更简洁，也更贴合Angular表单的设计思路：

修改后的HTML代码：

<mat-form-field>
 <mat-label for="userName">Name</mat-label>
 <input id="userName" 
   [formControl]="nameControl"
</mat-form-field>

组件类中创建FormControl实例并直接订阅valueChanges：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  nameControl = new FormControl('');
  name: string = '';

  ngOnInit(): void {
    this.nameControl.valueChanges.subscribe(newValue => {
      console.log('输入的名称变化了:', newValue);
      // 如果需要同步到原来的name变量，添加这行
      this.name = newValue || '';
    });
  }
}

说明：方法二不需要依赖ngModel和standalone配置，直接通过响应式表单的API就能轻松订阅值变化，代码更简洁易维护。

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