AngularJS2：無法讀取未定義的屬性「窗體」

我開始使用AngularJS2網絡應用程序，並且已經開始使用登錄組件。我有一個文本輸入鏈接到一個控制器變量，它也顯示在視圖中。但是，由於某些原因，更新文本字段不會更新其旁邊的文本顯示。但是，alert（） - 我編輯的變量確實會顯示所做的更改。這裏是我的代碼：AngularJS2：無法讀取未定義的屬性「窗體」

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)

來源

2016-12-04 Thibault Henry

在你的'login.component.html'中你有'' login.component.ts'沒有變量'heroForm'。這是錯誤來自的地方。 –

哦，我沒有注意到，這是來自AngularJS檢查的一個愚蠢的複製/粘貼！當您遇到錯誤時Angular會阻止所有內容，這很有趣！ –

我有同樣的問題。我意識到，當我在我的html頁面上使用未定義的變量時，它導致了錯誤。基本上，您需要定義變量或從您的html頁面刪除。

正如我看到你沒有在你的組件中定義heroForm。

來源

2018-01-05 17:26:43 Wahap

AngularJS2：無法讀取未定義的屬性「窗體」

回答

相關問題