Angular 4.遇到表單模塊

我舉了一個例子：Angular 4 Forms Directive (ngForm) 並得到錯誤：沒有ngModel和ngForm指令。似乎沒有包括指令。Angular 4.遇到表單模塊

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/[email protected]: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/[email protected]: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 
    } 
}

任何想法有什麼問題它？

來源

2017-05-03 Paul Borozdin

所以..解決方案是在第一個父模塊中包含FormsModule，而不是全局的。我的項目結構：app => auth =>登錄。表單被包含在app.module中，而不是在auth.module中。我將它添加到身份驗證後，它開始工作。 –

您必須提供ngModel.so的名稱才能創建本地變量。

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

來源

2017-05-03 07:47:54

在我而言，我只是缺少ngModel指令輸入欄

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

加入它解決了問題。

來源

2018-01-25 09:22:00 WASIF

Angular 4.遇到表單模塊

回答

相關問題