Пометка поля формы #myFormField vs # myFormField = "ngModel" - PullRequest
Новая
       13

Пометка поля формы #myFormField vs # myFormField = "ngModel"

0 голосов
/ 17 января 2019

Может кто-нибудь указать, пожалуйста:

Что именно происходит / изменяется, когда #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>

image#inputPhoneNumber)">

Выход Case 2 - Расширение того же кода до #inputPhoneNumber="ngModel" Case 2 Output

StackBlitz

1 Ответ

0 голосов
/ 17 января 2019

Просто предоставив тег input с переменной шаблона, #inputPhoneNumber назначит объектное представление JavaScript этого HTMLElement переменной шаблона.

Попробуйте с этим: 

<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 переменной шаблона будет присвоено представление FormControl этого элемента HTML переменной шаблона.

Попробуйте с этим: 

<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 для вашей ссылки.

...