Angular 参考 # 与 ngModel

Question

我想知道什么时候我必须在我的输入上使用 [(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>

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

Answer 1

这是两个不同的概念：

NgModel

Creates a FormControl instance from a domain model and binds it to a form control element.

而 template reference variable

(...) is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component. (...)

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

例如，如果您想在其余 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 进行一些表单验证等

Answer 2

来自 Documentation：

[(ngModel)] 允许您将模板元素的值绑定到组件变量。
# : 可以在模板的任何地方引用

综上所述，ngModel指的是一个变量的值，而#reference指的是一个模板对象（HTML元素）。但是，您仍然可以使用 ViewChild 访问模板引用变量。

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

Answer 3

您永远不会使用 [(ngModel)]。NgModel 是 Angular FormsModule 的一部分.如果您导入了 FormsModule，则可以使用 ngModel 的额外功能。这样做会创建一个 NgForm 和 FormControl，您可以在更复杂的反应和动态形式中使用它们，并将跟踪字段的状态，例如肮脏的，感动的。它还将允许您在字段上放置错误验证器，以及公开一个 Observable 值更改流。

使用模板变量和 ViewChild 来获取一个输入元素并与其交互，就像使用普通 JS 一样也很好，特别是如果您的用例很简单。这样您就可以避免在模块中包含 FormsModule。

Answer 4

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

Angular 参考 # 与 ngModel

Angular reference # vs ngModel

angular

angular-ngmodel

angular-template-variable