標記表單字段#myFormField與＃myFormField =“ ngModel”

Question

有人可以指出：

將#myFormField擴展為#myFormField="ngModel"時，究竟會發生什么/更改？ 這些符號的名稱是什么？

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('inputPhoneNumber') viewChildPhoneNumber: number;
  phoneNumber: number;
}

情況1： #inputPhoneNumber ，輸出如下

<p> Input Field</p>

<input 
class="form-control" 
type="text" 
[(ngModel)]="phoneNumber"
pattern="[\d]*" 
#inputPhoneNumber
required
/>
<div *ngIf="inputPhoneNumber.errors?.pattern"> 
  <b>Phone number must only contain digits</b>
</div>

<div>Two Way Binding: <b>{{phoneNumber}}</b></div>
<div>ViewChild: <b>{{viewChildPhoneNumber.nativeElement.value}}</b></div>
<div>#inputPhoneNumber: <b>{{inputPhoneNumber.value}}</b></div>

情況2輸出-將相同的代碼擴展到#inputPhoneNumber="ngModel"

StackBlitz

Answer 1

只需為input標簽提供模板變量， #inputPhoneNumber就會將該HTMLElement的JavaScript對象表示形式分配給模板變量。

試試這個：

<p> Input Field - With Just Template Varaible:</p>

<input 
  class="form-control" 
  type="text" 
  [(ngModel)]="phoneNumber"
  pattern="[\d]*" 
  #first
  required
  />

<div *ngIf="first.errors?.pattern"> 
  Phone number must only contain digits
</div>

<div>Two Way Binding: {{phoneNumber}}</div>
<div>ViewChild Native Element: {{viewChildFirst?.nativeElement | json}}</div>
<div>ViewChild Control: {{viewChildFirst.control | json}}</div>
<div>#first: {{first?.value}}</div>

在組件類中：

@ViewChild('first') viewChildFirst;

顯而易見，在這種情況下不會定義viewChildFirst.control 。

---

但是將ngModel分配給模板變量會將HTML元素的FormControl表示形式分配給模板變量。

試試這個：

<p> Input Field - With Template And ngModel assigned</p>

<input 
  class="form-control" 
  type="text" 
  [(ngModel)]="phoneNumber"
  pattern="[\d]*" 
  #second="ngModel"
  required
  />

<div *ngIf="second.errors?.pattern"> 
  Phone number must only contain digits
</div>

<div>Two Way Binding: {{phoneNumber}}</div>
<div>ViewChild Native Element: {{viewChildSecond?.nativeElement}}</div>
<div>ViewChild Conttrol: {{viewChildSecond.control | json}}</div>
<div>#second: {{second?.value}}</div>

<hr>

在組件類中：

@ViewChild('second') viewChildSecond;

這次，將不定義viewChildSecond?.nativeElement ，但將定義viewChildSecond.control 。

---

您可以像上面一樣通過完全打印出模板變量來進行檢查。 這是供您參考的工作樣本StackBlitz 。