* ng如果=“true”应用于表单时无法访问表单数据

问题描述 投票:1回答:2

我正在尝试在下面的模板(value1value2)中打印表单数据。 value1正在按预期打印,但value2是空的。但是,如果我删除*ngIf = "true"它工作正常。

stackblitz

<form class = "input-form" #inputForm="ngForm" *ngIf="true">
  <input ngModel name="inputData" required>
  <i>value1:{{inputForm.value|json}}</i>
</form>
<i>value2:{{inputForm.value|json}}</i>
angular
2个回答
2
投票

它之所以不起作用,是因为结构指令*ngIf在引擎盖下创建了一个新的模板引用。这样就不再可以访问inputForm变量,因为这些变量不能跨模板共享。您需要在组件内部使用@ViewChild来访问它。

基本上ngIf做的是:

<ng-template [ngIf]="true">
  <form class = "input-form" #inputForm="ngForm">
    <input [(ngModel)]="inputValue" name="inputData" required>
    <i>value1:{{inputValue|json}}</i>
  </form>
</ng-template>
<i>value2:{{inputForm.value|json}}</i>

正如您所看到的,inputForm现在位于其自己的模板中,并且无法在其外部访问。

在这里你可以看到一个工作的stack


0
投票

使用* ngIf与<i>不与<from>

<form class = "input-form" #inputForm="ngForm" >
  <input ngModel name="inputData" required>
  <i>value1:{{inputForm.value|json}}</i>
</form>
<i *ngIf="true">value2:{{inputForm.value | json}}</i>

或者你可以像这样使用

HTML:

<form class = "input-form" #inputForm="ngForm" *ngIf="true">
  <input [(ngModel)]="inputValue" name="inputData" required>
  <i>value1:{{inputValue|json}}</i>
</form>
<i>value2:{{inputValue|json}}</i>

打字稿:

inputValue: string;

你可以在ts中声明值并使用双重绑定[(ngModel)]="inputValue"

你能详细说明你的问题,以便我们能更好地理解吗?

© www.soinside.com 2019 - 2024. All rights reserved.