表单控件上 #userName 和 #userName="ngModel" 这两种方式有什么区别？

Question

在 Angular 中， #userName 和 #userName="ngModel" 都是模板引用变量（Template Reference Variables），它们用于在模板中引用 DOM 元素或指令，但二者有一些关键的区别。

1. #userName （纯模板引用变量）

• #userName 只是一个引用变量，它指向模板中的元素（例如输入框 <input> ）或指令（如 ngModel ）实例，但不会直接绑定该指令的状态或行为。
• 这意味着， #userName 只是一个对该元素或指令实例的引用，你可以在模板中通过这个引用来访问该 DOM 元素或指令，但不会自动与表单控制（ ngModel ）的值进行交互。

   <input #userName />
   <button (click)="console.log(userName)">Log userName</button>

在这个例子中， #userName 只是引用了 DOM 元素 input ，如果你点击按钮，它会在控制台打印出该元素的引用（而不是 ngModel 的值）。

2. #userName="ngModel" （指令绑定模板引用变量）

• #userName="ngModel" 是通过指令与模板引用变量进行绑定，这样你可以访问到与 ngModel 关联的表单控件实例，而不仅仅是原始的 DOM 元素。
• 这会让你获得 ngModel 指令的 API（例如： value 、 valid 、 dirty 等），从而在模板中能够动态地访问表单控件的状态。

   <input [(ngModel)]="userName" #userName="ngModel" />
   <button (click)="console.log(userName.value)">Log userName value</button>

在这个例子中， #userName="ngModel" 让 userName 变量引用到 ngModel 指令实例，这样你就可以访问到与 ngModel 绑定的值（即 userName.value ）。你可以通过这种方式访问控件的状态或值。

主要区别

• #userName ：直接引用 DOM 元素或指令实例，但不自动访问 ngModel 绑定的控件状态。
• #userName="ngModel" ：引用 ngModel 指令实例，并绑定到该实例，从而可以访问到 ngModel 绑定的控件的状态和数据。

使用场景

• 如果你只需要引用 DOM 元素本身，可以使用 #userName 。
• 如果你需要获取 ngModel 的状态（如值、是否有效、是否脏等），则应使用 #userName="ngModel" 。

通过 #userName="ngModel" ，你能够在模板中访问表单控件的更多信息，进而在逻辑中进行更精确的控制。