代码之家 › 专栏 › 技术社区 › Alexander Tarasenko

角度参考vs Ng模型

angular-template-variable angular-ngmodel angular

0

Alexander Tarasenko · 技术社区 · 8 年前

我想知道我什么时候必须在我的输入上使用[(ngmodel)],什么时候我可以只使用引用例如

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

我会感谢你的回答)

3 回复 | 直到 8 年前

1

0

Augustin R SOUVIK SAHA 8 年前

从 Documentation :

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

总之,ngmodel引用变量的值,而引用引用模板对象(HTML元素)。但是,您仍然可以使用 ViewChild .

我认为你写的例子都是正确的。如果我需要组件中的值,并且如果我需要在DOM中的值,我宁愿使用ngmodel。

2

0

lealceldeiro VonC 8 年前

这是两个不同的概念:

NgModel

创建一个 FormControl 来自域模型的实例并将其绑定到窗体控件元素。

当一个 template reference variable

(…)通常是对模板内DOM元素的引用。它可以也可作为角组件、指令或网络的参考。组件。(…)

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

例如,如果要引用某个模型( 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中的某些表单验证等。

3

0

joh04667 8 年前

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

使用模板变量和 ViewChild 仅仅获取一个输入元素并像处理普通JS那样与之交互也是很好的,特别是当您的用例很简单的时候。这样可以避免包括 表格模板 在您的模块中。