Angular模板驱动表单：如何获取NgModel实例供ngForm.getControl使用？

嘿，这事儿其实不难，我给你两种常用的方法来搞定：

方法一：用模板引用变量直接获取（最直观） #

你只需要给输入框加个模板引用变量，并绑定到ngModel导出接口上，就能直接拿到对应的NgModel实例了。修改你的代码如下：

<clr-input-container>
  <label class="input-label required">{{ 'ORDER.AMOUNT' | translate }}</label>
  <input 
    type="number" 
    min="0" 
    class="input-field" 
    clrInput 
    [(ngModel)]="order.quantity" 
    name="quantity" 
    required
    #quantityModel="ngModel" /> <!-- 新增模板引用变量 -->
</clr-input-container>

然后在组件类里，用@ViewChild来获取这个模板变量对应的NgModel实例，再传给NgForm的getControl方法就能拿到FormControl了：

import { Component, ViewChild, OnInit } from '@angular/core';
import { NgForm, NgModel } from '@angular/forms';

@Component({
  // 你的组件元数据（比如selector、templateUrl等）
})
export class YourOrderComponent implements OnInit {
  order = { quantity: 0 };
  // 获取表单实例
  @ViewChild(NgForm) orderForm!: NgForm;
  // 获取输入框对应的NgModel实例
  @ViewChild('quantityModel') quantityModel!: NgModel;

  ngOnInit(): void {
    // 视图初始化后，就能拿到FormControl了
    const quantityControl = this.orderForm.getControl(this.quantityModel);
    // 现在你可以操作这个control了，比如监听值变化、验证状态等
    quantityControl?.valueChanges.subscribe(val => {
      console.log('数量变化:', val);
    });
  }
}

方法二：通过NgModel类批量查询（适合多表单控件场景） #

如果你的表单里有很多控件，不想一个个加模板变量，可以用@ViewChildren(NgModel)查询所有NgModel实例，再根据name属性筛选出你要的那个：

import { Component, ViewChildren, QueryList, OnInit } from '@angular/core';
import { NgForm, NgModel } from '@angular/forms';

@Component({
  // 组件元数据
})
export class YourOrderComponent implements OnInit {
  order = { quantity: 0 };
  @ViewChild(NgForm) orderForm!: NgForm;
  @ViewChildren(NgModel) allNgModels!: QueryList<NgModel>;
  private quantityModel!: NgModel;

  ngOnInit(): void {
    // 筛选出name为'quantity'的NgModel实例
    this.quantityModel = this.allNgModels.find(model => model.name === 'quantity')!;
    const quantityControl = this.orderForm.getControl(this.quantityModel);
    // 后续操作同上
  }
}

小提示 #

• 记得要在ngOnInit或ngAfterViewInit生命周期钩子中获取实例，因为只有当视图渲染完成后，这些实例才会被初始化。
• 如果你只是想在模板里直接用控件的状态（比如验证是否通过），直接用模板变量{{ quantityModel.valid }}就行，不用在组件里获取。

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