не может использовать * ngIf на поля ввода

Всякий раз, когда я прав, чтобы сделать поле ввода условно доступным с помощью * ngIf структурной директивы.не может использовать * ngIf на поля ввода

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

, где inputName не определен, и выводит сообщение об ошибке. Воссозданная ошибка в этом plunkr: here.

Я не понимаю, почему эта ошибка возникла, поскольку условие в * ngIf истинно. Это означает, что был создан элемент DOM входного поля, и мы можем увидеть обновленную модель, когда мы вводим что-то в поле ввода. Но ошибка, вызванная ошибкой, предполагает, что поле ввода даже не существует.

Трассировка стека:

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:

источник

2017-02-12 Paul Thomas

Я не получить то, что вы хотите сделать здесь. Вы хотите заполнить ввод «имя» после нажатия кнопки? –

Это был просто отдых ошибки, которую я получал, когда я пытался динамически вставлять/удалять поле ввода внутри формы. Кнопка щелчка находится здесь, чтобы показать, что модель обновляется, даже если элемент управления выбрасывает неопределенную ошибку. –

@ GünterZöchbauer. Мне любопытно, связанный с этим вопросом, почему '* ngIf' делает' inputName' undefined, когда они используются вместе ?? Я думал, что вы знаете ... так хорошо ... вы все знаете: D: D Я сам пробовал просеивать документы, но я не мог найти ничего полезного. Код OP procded полностью работает, если вы удалите * ngIf. Пожалуйста, скажите мне, почему и убейте мое любопытство :) – Alex

Вот ваша рабочая версия:

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

источник

2017-02-12 11:03:49

Так что просто импортируйте CommonModule в импорт? Зачем? –

@paulthomas, необходимые для большинства угловых директив, таких как ngIf. Но Tuong Le исправил также некоторые опечатки в вашем коде (, «" и т. Д.). log() также следует заменить logMe(). – kdev

Это не ** рабочая версия. –

не может использовать * ngIf на поля ввода

ответ

Смежные вопросы