角度參考 # 與 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的額外功能。 這樣做會創建一個NgForm和FormControl ，您可以在更復雜的反應式和動態表單中使用它們，並跟蹤字段的狀態，例如臟、觸摸。 它還允許您在字段上放置錯誤驗證器，以及公開值更改的 Observable 流。

使用模板變量和ViewChild來抓取一個輸入元素並像使用 vanilla JS 一樣與之交互也很好，特別是如果您的用例很簡單。 這樣您就可以避免在您的模塊中包含FormsModule 。

Answer 2

這是兩個不同的概念：

模型

從域模型創建FormControl實例並將其綁定到表單控件元素。

而模板引用變量

(...) 通常是對模板中 DO​​M 元素的引用。 它也可以是對 Angular 組件或指令或 Web 組件的引用。 （……）

它們的用法完全不同，這取決於您的用例。

例如，如果您想在 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 3

從文檔：

• [(ngModel)]允許您將模板元素的值綁定到組件變量。
  
• # : 可以在模板中的任何地方引用

總之，ngModel 指的是一個變量的值，而# 引用指的是一個模板對象（HTML 元素）。 但是，您仍然可以使用ViewChild訪問模板引用變量。

我認為你寫的例子都是正確的。 如果我需要組件中的值，我更喜歡使用 ngModel，如果我需要它在 DOM 中，我更喜歡使用 #。

Answer 4

對於簡單的雙向綁定（在組件和模板之間）[( ngModel )] 可能更可取，但是通過本地引用，我們能夠處理任何元素的任何屬性（如果需要），而不僅僅是輸入的值元素。