AngularJS2：无法读取未定义的属性“形式”答案

【问题标题】：AngularJS2 : Cannot read property 'form' of undefinedAngularJS2：无法读取未定义的属性“形式”
【发布时间】：2018-01-19 20:03:23
【问题描述】：

我正在启动一个 AngularJS2 网络应用程序，并且我已经从一个登录组件开始。我有一个链接到控制器变量的文本输入，该变量也显示在视图中。但是，由于某种原因，更新文本字段不会更新它旁边的文本显示。但是，alert()-ing 我编辑的变量确实会显示所做的更改。这是我的代码：

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)

【问题讨论】：

在您的login.component.html 中有<button type="submit" id="button-connexion" [disabled]="!heroForm.form.valid">Connexion</button>，但在您的login.component.ts 中没有变量heroForm。这就是错误的来源。
哦，我没注意到，这是来自 AngularJS 示例的愚蠢复制/粘贴！有趣的是，当您遇到错误时，Angular 会阻止一切！

标签： javascript angular

【解决方案1】：

我有同样的问题。我意识到当我在我的 html 页面上使用未定义的变量时，它会导致错误。基本上，您需要定义变量或从 html 页面中删除。

正如我所见，您尚未在组件中定义 heroForm。

【讨论】：