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

Question

以下是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"
    },
   ...............

变化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>

变化password.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
  ]
...........

我收到以下错误:

未处理的Promise拒绝:模板解析错误:没有指令将"exportAs"设置为"ngModel"("urrent密码"#currentPassword ="ngModel"id ="currentPassword"name ="currentPassword"type ="text"class =" form-co"):ChangePasswordComponent @ 5:4;区域:;任务:Promise.then;值:语法错误{__zone_symbol__error:错误:模板解析错误:没有指令将"exportAs"设置为"ngModel"("urrent Passwo" ......}错误:模板解析错误:没有指令将"exportAs"设置为"ngModel"("urrent密码"#currentPassword ="ngModel"id ="currentPassword"name ="currentPassword"type ="text"class = "form-co"):在SyntaxError.ZoneAwareError(http:// localhost:4200/polyfills.bundle.js:6884:33)处的SyntaxError.BaseError [作为构造函数]的ChangePasswordComponent @ 5:4 (http:// localhost: 4200/vendor.bundle.js:64475:16)新的SyntaxError(http:// localhost:4200/vendor.bundle.js:5727:16)

Answer 1

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

无需设置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>

您可能还希望在触摸字段时显示错误消息(??).这一切都可以在我提供的验证链接中找到:)

更新了演示

Answer 2

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

答案来得很晚，但是如果有人陷入角度5的问题，则需要这样做。

Answer 3

这可能会对 Angular 6 中的某个人有所帮助。

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

Answer 4

如果您使用 Angular 模板驱动的表单并希望使用，#xname="ngModel"您还需要[(ngModel)]="mymodel"在同一输入中使用指令，当然，如上面的其他答案所述，将 de 导入FormsModule到您的app.module.