can't use *ngIf on input fields

Question

Whenever I true to make a input field conditionally available by using *ngIf structural directive.

<form>
  <input *ngIf='true' #inputName [(ngModel)]='log' name='ex1'/>
  <button  (click)='logMe(inputName.value)'>Click</button>
</form>

where inputName is undefined, and displays an error. Recreated error in this plunkr: here.

I don't get why this error would arise since the condition in *ngIf is true. That means the DOM element of input field was created and we can see the model getting updated when we enter something into the input field. But, the error thrown suggests as if the input field doesn't even exist.

Stack Trace:

EXCEPTION: Error in ./App class App - inline template:3:2 caused by: Cannot read property 'value' of undefined
ErrorHandler.handleError @ core.umd.js:3064
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
core.umd.js:3066 ORIGINAL EXCEPTION: Cannot read property 'value' of undefined
ErrorHandler.handleError @ core.umd.js:3066
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
core.umd.js:3069 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ core.umd.js:3069
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
core.umd.js:3070 TypeError: Cannot read property 'value' of undefined
    at CompiledTemplate.proxyViewClass.View_App0.handleEvent_5 (VM5226 component.ngfactory.js:189)
    at CompiledTemplate.proxyViewClass.eval (core.umd.js:12399)
    at HTMLButtonElement.eval (platform-browser.umd.js:3224)
    at ZoneDelegate.invokeTask (zone.js:275)
    at Object.onInvokeTask (core.umd.js:3971)
    at ZoneDelegate.invokeTask (zone.js:274)
    at Zone.runTask (zone.js:151)
    at HTMLButtonElement.ZoneTask.invoke (zone.js:345)
ErrorHandler.handleError @ core.umd.js:3070
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
core.umd.js:3073 ERROR CONTEXT:

I don't really get what do you want to do here. You want to fill the input with "name" after button click? — kind user
It was just a recreation of the error that I was getting when I tried to dynamically insert/remove an input field inside a form. The click button is just there to show that the model gets updated even though the control is throwing undefined error — Paul Thomas
@GünterZöchbauer I'm curious, related to this question as to why *ngIf makes inputName undefined when they are used together?? I thought you might know... since well... you know everything :D :D I myself tried sifting through the docs, but I couldn't find anything helpful. The code OP procided is fully working if you remove the *ngIf. Please tell me why and kill my curiousity :) — AT82

Tuong Le Tuong Le · Accepted Answer · 2017-02-12T11:03:49

Here's your working version:

import { Component, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NgForm } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Component({
  selector: 'my-app',
  template: `
            <div>
            <form #f="ngForm"> 
              <button (click)="log(name)">Click me</button>
              <input *ngIf="true" name="name" [(ngModel)]="name" />
            </form>
            </div>
          `,
})
export class App {
  name: string;
  log: string;
  constructor() {
    this.name = 'Angular2'
  }

  logMe(s) {
    this.log = s;
  }
}

@NgModule({
  imports: [BrowserModule, FormsModule, CommonModule],
  declarations: [App],
  bootstrap: [App]
})
export class AppModule { }

can't use *ngIf on input fields

1 Answers