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)
あなたの 'login.component.html'には' ' login.component.ts'変数 'heroForm'はありません。それがエラーの原因です。 –
ああ、私はそれに気付かなかった、これはAngularJSのexampeからダムのコピー/ペーストだった!エラーが発生した場合、Angularがすべてをブロックする方法は面白いです! –