angular - 角度参考# vs ngModel
问题描述
我想知道什么时候必须在我的输入中使用 [(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>
我会感谢任何答案)
解决方案
你不必使用[(ngModel)]
,永远。NgModel
是 Angular 的一部分FormsModule
。如果你有FormsModule
导入的,你可以使用ngModel
. 这样做会创建一个NgForm
and FormControl
,您可以在更复杂的反应式和动态表单中使用它,并将跟踪字段的状态,例如脏、触摸。它还允许您在字段上放置错误验证器,并公开一个可观察的值更改流。
使用模板变量并ViewChild
像使用 vanilla JS 一样抓取输入元素并与之交互也很好,尤其是在您的用例很简单的情况下。这样你可以避免FormsModule
在你的模块中包含。
推荐阅读
- python - python:如果列条件满足该列中的更改值
- html - 顶行中的元素隐藏在底行下的CSS问题
- java - Java json 将值附加到 json 数组
- typescript - 是否有一种类型安全的方式来表示函数在传递 T 时返回 T 类型的对象,但返回 Partial 类型的对象
什么时候通过的? - intellij-idea - IntelliJ IDEA 2018.3 浏览存储库
- c++ - 如何在头文件和源文件中组织模板函数和函数
- spfx - spfx - onpropertychange 事件
- php - 需要 WP Acceptance 和 composer.json 文件
- excel - 如何在 Outlook 电子邮件的主题中的每个“-”之后在 Excel 中分隔到一个新单元格
- tfs - 一组测试(有序测试)的测试结果仅显示为每组一个测试结果