标记表单字段 #myFormField 与 #myFormField="ngModel"答案

【问题标题】：Tagging a form field #myFormField vs #myFormField="ngModel"标记表单字段 #myFormField 与 #myFormField="ngModel"
【发布时间】：2019-06-11 12:54:51
【问题描述】：

谁能指出来：

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

【问题讨论】：

嗯，这两种语法之间的区别的解释可以在这里阅读Take Advantage Of The exportAs Property。为什么您的特定代码不起作用是因为您的 {{viewChildPhoneNumber.nativeElement.value}} 上的模板错误。删除它，它应该可以按预期工作！

标签： angular forms angular-ngmodel

【解决方案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 会被定义。

您可以通过准确打印出模板变量来检查它，就像我在上面所做的那样。这是一个Working Sample StackBlitz 供您参考。

【讨论】：