Angular中单独使用无值ngModel属性和#firstName模板变量的作用是什么？

无赋值ngModel的作用 #

你代码里的这种写法是Angular模板驱动表单的标准用法之一，核心作用是让Angular自动跟踪这个表单控件的状态和值，不需要你手动在ts文件中声明对应变量绑定：

• 只要表单控件同时声明了ngModel和name属性，且对应模块已经导入FormsModule的前提下，Angular会自动为这个控件生成FormControl实例，并且以name属性的值为键，注册到外层<form>标签自动生成的顶层FormGroup中。
• 不需要写[(ngModel)]双向绑定的场景下，你依然可以通过表单实例或者模板变量拿到这个控件的输入值、校验状态，适合只需要做表单校验、提交时统一取整体表单值的轻量化场景。

#firstName="ngModel"模板变量的作用 #

这个语法是把Angular自动为当前控件生成的NgModel实例（封装了对应FormControl的指令实例）赋值给firstName这个模板变量，方便你在模板中直接调用该控件的所有状态和属性：

• 你代码里(change)="log(firstName)"就是把这个实例传入ts的log方法，你可以在方法中拿到firstName.value（输入框当前值）、firstName.valid（是否通过必填校验）、firstName.touched（是否被点击/聚焦过）、firstName.errors（所有校验错误信息）等所有表单状态。
• 你也可以直接在模板中用这个变量做交互，比如加必填错误提示：

<div *ngIf="firstName.invalid && firstName.touched" class="text-danger">请输入姓名</div>

整体运行逻辑 #

1. 页面初始化时Angular解析到<form>标签，自动生成顶层NgForm实例（对应表单整体的FormGroup）
2. 解析到input控件的ngModel和name="firstName"属性，自动生成对应NgModel实例和关联的FormControl，将该控件注册到顶层表单中
3. #firstName="ngModel"将生成的NgModel实例暴露为模板可调用的变量
4. 用户输入内容时，Angular自动更新该NgModel实例的所有状态，触发change事件时就会把最新的实例传入你的log方法

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