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

Question

以下是AngularJS项目中的文件。正如一些帖子所建议的，我补充道：

ngModel name="currentPassword" #currentPassword="ngModel 

在输入字段中，但仍然得到一个错误。

包裹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"
    },
   ...............

change-password.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>

更改密码。组成部分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() {
  }

}

应用程序。单元ts有进口产品

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

我得到以下错误：

未处理的Promise拒绝：模板解析错误：没有将exportAs设置为ngModel的指令（当前密码）#当前密码=ngModel id=当前密码名称=当前密码type=文本class=form-co）：ChangePasswordComponent@5：4；区域：；任务：Promise.then；值： SynTaxError{__zone_symbol__error：错误：模板解析错误：没有将"exportAs"设置为"ngModel"的指令（"urrent Passwo......}错误：模板解析错误：没有将exportAs设置为ngModel的指令（"urrent Password]#当前密码="ngModel"id="当前密码"name="当前密码"type="text"class="form-co"）：ChangePasswordComponent@5： 4 at SynTaxError.[http://localhost:4200/polyfills.bundle.js： 6884:33]BaseError[作为构造函数]（http://localhost:4200/vendor.bundle.js： 64475:16）在新的SynTaxError（http://localhost:4200/vendor.bundle.js： 5727:16）

Answer 1

这可能会帮助角6中的某人。

我忘记在输入控件中添加了ngModel指令，但在表单中添加了#currentPassword=“ngModel”。进口等都到位了。

Answer 2

您使用的是模板驱动和模型驱动表单的奇怪混合。选择其中一个，不要混合这两个。下面是模型驱动表单的示例：

不需要在模板中设置需要或minlong，我们在组件中处理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>

在构建表单时，我们设置了所有需要的验证器，在本例中是必需的和最小长度：

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>

您可能还希望在触摸字段（？）时显示错误消息。这是我为验证提供的链接中的全部内容：）

更新的演示

Answer 3

从'@angular/forms'添加导入{FormsModule}；到你的应用程序。单元在导入数组中，您需要添加FormsModule。

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