angular - 角度参考# vs 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>

我会感谢任何答案）

score 7 · Accepted Answer

你不必使用[(ngModel)]，永远。NgModel是 Angular 的一部分FormsModule。如果你有FormsModule导入的，你可以使用ngModel. 这样做会创建一个NgFormand FormControl，您可以在更复杂的反应式和动态表单中使用它，并将跟踪字段的状态，例如脏、触摸。它还允许您在字段上放置错误验证器，并公开一个可观察的值更改流。

使用模板变量并ViewChild像使用 vanilla JS 一样抓取输入元素并与之交互也很好，尤其是在您的用例很简单的情况下。这样你可以避免FormsModule在你的模块中包含。

score 2 · Accepted Answer

这是两个不同的概念：

模型

从域模型创建FormControl实例并将其绑定到表单控件元素。

而模板引用变量

(...) 通常是对模板中 DOM 元素的引用。它也可以是对 Angular 组件或指令或 Web 组件的引用。(...)

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

例如，如果您想ngModel在 html 的其余部分中使用 var 引用某个模型 ( )，您可以这样做：

<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>

现在您可以#newUser在 html 中使用一些表单验证等。

score 1 · Accepted Answer

从文档：

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

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

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

score 0 · Accepted Answer

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

angular - 角度参考# vs ngModel

4 回答 4

Related

Reference