AngularJS2: Eigenschaft 'Form' von undefined kann nicht gelesen werden

Question

Ich beginne eine AngularJS2 Web-App, und ich habe mit einer Login-Komponente begonnen. Ich habe eine Texteingabe, die mit einer Steuerungsvariablen verknüpft ist, die auch in der Ansicht angezeigt wird. Aus irgendeinem Grund aktualisiert die Aktualisierung des Textfeldes die Textanzeige daneben jedoch nicht. Alert() - meine bearbeiteten Variablen zeigen jedoch die vorgenommenen Änderungen an. Hier ist mein Code:

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> 

Und meine Header index.html für den Import Skripte:

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

Meine Konsole zeigt diesen Fehler:

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) 

Answer 1

hatte ich das gleiche Problem. Ich erkannte, wenn ich eine undefinierte Variable auf meiner HTML-Seite verwendet habe, verursachte es den Fehler. Grundsätzlich müssen Sie entweder die Variable definieren oder von Ihrer HTML-Seite löschen.

Wie ich gesehen habe, haben Sie heroForm in Ihrer Komponente nicht definiert.