Angular 角度参考#vs NGM模型

我想知道什么时候我必须在输入中使用[（ngModel）]，什么时候我可以只使用#reference 比如说

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" [(ngModel)]="newUser">
    <button class="btn btn-outline-success" (click)="onAddUser()">Add user</button>
  </div>
</div>

添加用户

我应该这样做，或者我可以这样做：

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" #newUser>
    <button class="btn btn-outline-success" (click)="onAddUser(newUser.value)">
      Add user
    </button>
  </div>
</div>

添加用户

---

如果有任何答案，我将不胜感激）

这是两个不同的概念：

从域模型创建

FormControl

实例并将其绑定到 表单控件元素

一会儿

（…）通常是对模板中DOM元素的引用。它可以 也可以是对角度组件、指令或web的引用 组成部分。（……）

它们的用法完全不同，这取决于您的用例

例如，如果您想通过html的其余部分使用var引用某个模型（

ngModel

），您可以执行以下操作：

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" [(ngModel)]="newUser" #newUser="ngModel">
    <button class="btn btn-outline-success" (click)="onAddUser()">Add user</button>
  </div>
</div>

添加用户

现在，您可以在html中使用

#newUser

进行一些表单验证等。

From:

• [（ngModel）]

  允许您将模板元素的值绑定到组件变量。
  

• #

  ：可以在模板中的任何位置引用

总之，ngModel指的是变量的值，而#reference指的是模板对象（HTML元素）。 但是，您仍然可以使用访问模板引用变量

我认为你写的例子都是正确的。如果我需要组件中的值，并且#如果我需要DOM中的值，我更喜欢使用ngModel。

您永远不必使用

[（ngModel）]

。

ngModel

是Angular

FormsModule

的一部分。如果导入了

表单模块

，则可以使用

ngModel

的额外功能。这样做会创建一个

NgForm

和

FormControl

，您可以在更复杂的反应式和动态表单中使用该表单，并将跟踪字段的状态，例如脏、触摸。它还允许您在字段上放置错误验证器，以及公开可观察到的值更改流

---

使用模板变量和

ViewChild

获取一个输入元素并与之交互，就像使用vanilla JS一样，这也很好，特别是如果您的用例很简单的话。通过这种方式，您可以避免在模块中包含

FormsModule

。

对于简单的双向绑定（组件和模板之间）[（ngModel）]可能更可取，但通过本地引用，我们可以使用任何元素的任何属性（如果需要），不仅使用输入元素的值。

[（ngModel）]用于双向绑定，另一方面[ngModel]不绑定任何变量，因此它几乎像模板一样工作，那么有什么区别呢？[]单独允许以一种方式从ts绑定到DOM。例如，在ts文件中定义了

和

某个变量。例如，使用#like
可以在DOM或ts中引用
输入。