2016-12-04 30 views
1

私はAngularJS2 web-appを開始しています。ログインコンポーネントで開始しました。 コントローラ変数にリンクされたテキスト入力があり、これもビューに表示されます。ただし、何らかの理由でテキストフィールドを更新しても、その横のテキスト表示は更新されません。 しかし、編集した変数をalert()すると変更が表示されます。AngularJS2:未定義のプロパティ 'form'を読み取ることができません

login.component.ts: はここに私のコードです

import { Component, Input, OnInit } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 
import { FormsModule }    from '@angular/forms'; 

@Component({ 
    moduleId: module.id, 
    selector: 'login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 
export class LoginComponent { 

    login: string = "test1"; 
    pass: string = "test2"; 

    onSubmit(): void { 
     alert("Form submit: " + this.login + this.pass); 
    } 
} 

login.component.html

<div id="login"> 

    {{this.login}} 
    {{this.pass}} 

    <form (ngSubmit)="onSubmit()"> 

     <label for="form-login">Login</label> 
     <input type="text"  class="form-input" id="form-login" name="form-login" [(ngModel)]="login"><br> 

     <label for="form-pass">Mot de passe</label> 
     <input type="password" class="form-input" id="form-pass" name="form-pass" [(ngModel)]="pass"> 

     <button type="submit" id="button-connexion" [disabled]="!heroForm.form.valid">Connexion</button> 

    </form> 

</div> 

そしてインポートするためのindex.htmlをの私のヘッダースクリプト:

<script src="node_modules/core-js/client/shim.min.js"></script> 

<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 

<script src="systemjs.config.js"></script> 
<script> 
    System.import('app').catch(function(err){ console.error(err); }); 
</script> 

マイコンソールを表示このエラー:

core.umd.js:2838 EXCEPTION: Uncaught (in promise): Error: Error in http://localhost/app/login/login.component.html:13:46 caused by: Cannot read property 'form' of undefined 
TypeError: Cannot read property 'form' of undefined 
at CompiledTemplate.proxyViewClass.View_LoginComponent0.detectChangesInternal (/AppModule/LoginComponent/component.ngfactory.js:177:42) 
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost/node_modules/@angular/core/bundles/core.umd.js:9355:18) 
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost/node_modules/@angular/core/bundles/core.umd.js:9448:48) 
at CompiledTemplate.proxyViewClass.View_LoginComponent_Host0.detectChangesInternal (/AppModule/LoginComponent/host.ngfactory.js:29:19) 
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost/node_modules/@angular/core/bundles/core.umd.js:9355:18) 
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost/node_modules/@angular/core/bundles/core.umd.js:9448:48) 
at ViewRef_.detectChanges (http://localhost/node_modules/@angular/core/bundles/core.umd.js:7338:24) 
at RouterOutlet.activate (http://localhost/node_modules/@angular/router/bundles/router.umd.js:3747:46) 
at ActivateRoutes.placeComponentIntoOutlet (http://localhost/node_modules/@angular/router/bundles/router.umd.js:3224:20) 
at ActivateRoutes.activateRoutes (http://localhost/node_modules/@angular/router/bundles/router.umd.js:3198:26) 
+1

あなたの 'login.component.html'には' ' login.component.ts'変数 'heroForm'はありません。それがエラーの原因です。 –

+0

ああ、私はそれに気付かなかった、これはAngularJSのexampeからダムのコピー/ペーストだった!エラーが発生した場合、Angularがすべてをブロックする方法は面白いです! –

答えて

2

を私は同じ問題がありました。私はHTMLページで未定義の変数を使用したときにエラーが発生したことを認識しました。 基本的には、変数を定義するか、htmlページから削除する必要があります。

あなたのコンポーネントにはheroFormが定義されていません。

関連する問題