Angular：如何在Typescript中访问HTML标签类及Form控件属性并解决报错

报错Property 'ModelForm' does not exist on type 'AppComponent'的根本原因是你没有在AppComponent组件类中声明ModelForm属性，导致Typescript无法识别该成员。

场景1：使用响应式表单 #

需要先在组件类中显式声明并初始化表单实例：

1. 导入表单依赖

import { FormGroup, FormControl, Validators } from '@angular/forms';

2. 组件类中声明并初始化表单

export class AppComponent {
  // 显式声明ModelForm属性
  ModelForm: FormGroup;

  constructor() {
    // 初始化表单及内置控件
    this.ModelForm = new FormGroup({
      firstName: new FormControl('', Validators.required)
    });
  }

  ngOnInit(): void {
    // 推荐使用get方法访问控件，兼容性更强
    console.log(this.ModelForm.get('firstName')?.valid);
  }
}

场景2：使用模板驱动表单 #

需要通过@ViewChild装饰器关联模板中的表单引用：

1. 导入依赖

import { ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

2. 组件类中声明表单引用

export class AppComponent {
  // 绑定模板中#modelForm的引用，static设为true可在ngOnInit中访问
  @ViewChild('modelForm', { static: true }) ModelForm!: NgForm;

  ngOnInit(): void {
    console.log(this.ModelForm.form.controls.firstName?.valid);
  }
}

3. 确认模板中表单已添加对应标识

<form #modelForm="ngForm">
  <input name="firstName" ngModel required>
</form>

注意事项 #

• 变量名大小写必须完全匹配，模板引用名和组件类中声明的属性名要对应
• 若@ViewChild的static参数设为false，需要将访问逻辑移到ngAfterViewInit生命周期中执行，避免获取到空值

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