角4.フォームモジュールのトラブル

Question

私はここから例を取った：Angular 4 Forms Directive (ngForm) そして、エラーを受け取る： ngModelとngFormの指示はありません。思わぬディレクティブは含まれていませんでした。

ERROR Error: Uncaught (in promise): Error: Template parse errors: There is no directive with "exportAs" set to "NgForm" ("<form (ngSubmit)="onSubmit(f)" [ERROR ->]#f="NgForm" novalidate> <input name="first" [(ngModel)]="first" required #first="ngModel"> ..... 

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Template parse errors: There is no directive with "exportAs" set to "ngModel" (" 
<form (ngSubmit)="onSubmit(f)" novalidate> 
    <input name="first" ngModel required [ERROR ->]#first="ngModel"> 
    <input name="last" ngModel> 
    <button>Submit</button>"): ng:///AuthModule/LoginComponent.html@2:44 Error: Template parse errors: There is no directive with "exportAs" set to "ngModel" ("<form (ngSubmit)="onSubmit(f)" novalidate><input name="first" ngModel required [ERROR ->]#first="ngModel"><input name="last" ngModel><button>Submit</button>"): ng:///AuthModule/LoginComponent.html@2:44 
at syntaxError (http://localhost:4200/vendor.bundle.js:50027:34) [angular].... 

ファイルはここにある：

モジュールファイル：login.module.ts

 import { NgModule } from '@angular/core'; 
    import { CommonModule } from '@angular/common'; 
    import { FormsModule } from '@angular/forms'; 
    import { BrowserModule } from '@angular/platform-browser'; 

    import { LoginComponent } from './login.component'; 
    @NgModule({ 
     imports: [ 
      CommonModule, 
      FormsModule, 
      BrowserModule 
     ], 
     declarations: [LoginComponent], 
     bootstrap: [LoginComponent], 
    }) 
    export class LoginModule {} 

コンポーネントファイル：login.component.ts

import { Component } from '@angular/core'; 
    import { NgForm } from '@angular/forms'; 

    @Component({ 
     selector: 'sc-auth-login', 
     template: ` 
      <form (ngSubmit)="onSubmit(f)" #f="ngForm" novalidate> 
      <input name="first" ngModel required #first="ngModel"> 
      <input name="last" ngModel> 
      <button>Submit</button> 
      </form> 
      <p>First name value: {{ first.value }}</p> 
      <p>First name valid: {{ first.valid }}</p> 
      <p>Form value: {{ f.value | json }}</p> 
      <p>Form valid: {{ f.valid }}</p> 
     `, 
    }) 
    export class LoginComponent { 
     onSubmit(f: NgForm) { 
     console.log(f.value); // { first: '', last: '' } 
     console.log(f.valid); // false 
    } 
} 

どれでも何が間違っているのかそれ？

Answer 1

ngModel.soにローカル変数を作成できるように名前を付ける必要があります。私の場合は

<input name="first" [(ngModel)]="first" required #first="ngModel"> 
<input name="last" [(ngModel)]="last" #last="ngModel"> 

Answer 2

、私はちょうどそれが問題を解決追加することにより、入力フィールド

<input ngModel name="name" #name="ngModel"> 

にngModelディレクティブがありませんでした。