Angular - 没有将“exportAs”设置为“ngModel”的指令

问题描述 投票：0回答：7

以下是AngularJS项目中的文件。根据一些帖子的建议，我添加了：

ngModel name="currentPassword" #currentPassword="ngModel

在输入字段中，但仍然出现错误。

package.json

.........
"dependencies": {
        "@angular/common": "^2.3.1",
        "@angular/compiler": "^2.3.1",
        "@angular/core": "^2.3.1",
        "@angular/forms": "^2.3.1",
        "@angular/http": "^2.3.1",
        "@angular/platform-browser": "^2.3.1",
        "@angular/platform-browser-dynamic": "^2.3.1",
        "@angular/router": "^3.3.1",
        "core-js": "^2.4.1",
        "rxjs": "^5.0.1",
        "ts-helpers": "^1.1.1",
        "zone.js": "^0.7.2"
    },
   ...............

更改密码.component.html

<form #f="ngForm" [formGroup]="changePasswordForm">
        <div class="form-group">
            <label for="currentPassword">Current Password</label> <input
                placeholder="currentPassword" ngModel name="currentPassword"
                #currentPassword="ngModel" id="currentPassword"
                name="currentPassword" type="text" class="form-control" required
                minlength="6" formControlName="currentPassword">
            </div>
        </div>
        <button class="btn btn-primary" type="submit">Change Password</button>
    </form>

更改密码.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, ControlContainer, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-change-password',
  templateUrl: './change-password.component.html',
  styleUrls: ['./change-password.component.css']
})
export class ChangePasswordComponent implements OnInit {

  changePasswordForm;

  constructor(formBuilder: FormBuilder) {
    this.changePasswordForm = formBuilder.group({
      currentPassword: new FormControl('', Validators.compose([Validators.required]))
    });
  }

  ngOnInit() {
  }

}

app.module.ts 已导入

............
imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule
  ]
...........

我收到以下错误：

Unhandled Promise rejection: Template parse errors:
    There is no directive with "exportAs" set to "ngModel" ("urrent Password</label> <input
                    placeholder="currentPassword" ngModel name="currentPassword"
                    [ERROR ->]#currentPassword="ngModel" id="currentPassword"
                    name="currentPassword" type="text" class="form-co"): ChangePasswordComponent@5:4 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors:
    There is no directive with "exportAs" set to "ngModel" ("urrent Passwo……} Error: Template parse errors:
    There is no directive with "exportAs" set to "ngModel" ("urrent Password</label> <input
                    placeholder="currentPassword" ngModel name="currentPassword"
                    [ERROR ->]#currentPassword="ngModel" id="currentPassword"
                    name="currentPassword" type="text" class="form-co"): ChangePasswordComponent@5:4
        at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:6884:33)
        at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:64475:16)
        at new SyntaxError (http://localhost:4200/vendor.bundle.js:5727:16)
angular angular2-forms angular2-ngmodel
7个回答
20
投票

添加 import { FormsModule } from '@angular/forms';到您的 app.module.ts 并在导入数组中，您需要添加 FormsModule。

答案已经很晚了，但是如果有人在 Angular 5 中遇到这个问题，你需要这样做。

16
投票

您正在使用模板驱动和模型驱动形式的奇怪组合。选择其中之一，不要混合这两者。这是模型驱动形式的示例：

不需要在模板中设置

required
或
minlength
，我们在组件中处理thid。此外，我们不需要任何 
ngModel
、
name
等，因为我们使用 
formControlName
。同时删除 
#f="ngForm"
，因为它与模板驱动表单相关。所以你的模板应该是这样的：

<form [formGroup]="changePasswordForm">
  <label for="currentPassword">Current Password</label> 
  <input formControlName="currentPassword">
  <button type="submit">Change Password</button>
</form>

在构建表单时，我们设置了所需的所有验证器，在本例中为 

required
和 
minLength
:

constructor(formBuilder: FormBuilder) {
  this.changePasswordForm = formBuilder.group({
    currentPassword: new FormControl('', 
          Validators.compose([Validators.required, Validators.minLength(6)]))
  });
}

就是这样！ :)

我建议您阅读有关表单的内容，这里是模板驱动表单指南和反应式表单指南

编辑：

对于表单验证，请查看官方文档进行表单验证。如果您有很多字段，您可能需要调整他们的解决方案，将所有表单错误存储在单独的对象中。

但这里有一个基本的解决方案来检查每个表单控件的表单错误。因此，以下内容将供您验证：

<small *ngIf="changePasswordForm.get('currentPassword').hasError('required')">Required!</small>
<small *ngIf="changePasswordForm.get('currentPassword').hasError('minlength')">Minimum 6 chars</small>

您可能还想在触摸字段时显示错误消息（??）。您可以在我提供的用于验证的链接中找到所有这些:)

更新演示

10
投票

这可能会对使用 Angular 6 的人有所帮助。

我忘记将 

ngModel
指令添加到我的输入控件中，但已将 
#currentPassword="ngModel"
添加到我的表单中。进口等都已到位。

8
投票

如果您使用角度模板驱动的表单并想要使用 

#xname="ngModel"
，您还需要在同一输入中使用 
[(ngModel)]="mymodel"
指令，当然，将 de 
FormsModule
导入到您的 
app.module
，如中所述其他答案如上

1
投票
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ContactFormComponent } from './contact-form/contact-form.component';

@NgModule({
  declarations: [
    AppComponent,
    ContactFormComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

导入

FormsModule
解决了问题

0
投票

可能有两个原因：

  1. 检查您的 app.module.ts 中是否缺少 FormModule（如下）及其导入，导入：[]

    从“@Angular/forms”导入{FormsModule}；

  2. 如果正确保存所有内容后问题仍然存在。停止服务器并重新运行 ng 服务器

0
投票

除了前面的解决方案之外，如果您在 Angular 中使用路由并且您的组件未添加到组件数组中（在 

app-routing.module.ts
中声明），该组件又在 
 的声明中使用，也会出现此错误app.module.ts
。

所以，就我而言

app-routing.module.ts

import { AddActionComponent } from './pages/add-action/add-action.component';

const routes: Routes = [...,
{
  path: 'addaction',
  component: AddActionComponent
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [
  ...,
  AddActionComponent //this was missing for me
]

我的

app.module.ts
看起来像

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent, routingComponents],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.