角度参考 # 与 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)]，直到永远。NgModel是 Angular 的一部分FormsModule。如果您已FormsModule导入，则可以使用ngModel. 这样做会创建一个NgFormand FormControl，您可以在更复杂的反应和动态形式中使用它，并将跟踪字段的状态，例如脏的、触摸的。它还允许您在字段上放置错误验证器，以及公开值更改的 Observable 流。

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

Answer 2

来自文档：

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

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

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