Question

我正在尝试在下面的模板（value1和value2）中打印表单数据。 value1可以按预期打印，但value2为空。但是，如果我移除*ngIf = "true"，它将正常工作。

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

Answer 1

之所以不起作用，是因为结构指令*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

Answer 2

将* ngIf与type一起使用，而不与<i>一起使用

<from>

或者您可以这样使用

HTML：

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

TypeScript：

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

您可以在ts中声明值并使用双重绑定inputValue: string;

您能详细说明您的问题，以便我们更好地理解吗？

* ngIf =“ true”应用于表单时，无法访问表单数据

2 个答案: