角度-没有指令与“ exportAs”一起使用设置为“ ngModel” [英] Angular - There is no directive with "exportAs" set to "ngModel"

问题描述

以下是AngularJS项目中的文件。如某些帖子中所建议，我添加了：

Following are the files in the AngularJS project. As suggested in some posts, I have added:

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

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>

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

我遇到以下错误：

未处理的承诺拒绝：模板解析错误：
没有将 exportAs设置为 ngModel的指令（ urrent密码 #currentPassword = ngModel id = currentPassword
name = currentPassword type = text class = form-co）：ChangePasswordComponent @ 5：4;区域：；任务：Promise.then；值：SyntaxError {__zone_symbol__error：错误：模板解析错误：
没有将 exportAs设置为 ngModel的指令（ urrent Passwo……）错误：模板解析错误：
没有带有 exportAs的指令设置为 ngModel（租金密码]＃currentPassword = ngModel id = currentPassword
name = currentPassword type = text class = form-co）：ChangePasswordComponent @ 5：4
，语法错误。ZoneAwareError （ http：// localhost：4200 / polyfills.bundle.js：6884：33 ）位于SyntaxError.BaseError处的
[作为构造函数]（ http：// localhost： 4200 / vendor.bundle.js：64475：16 ）
在新的SyntaxError（ http：// localhost：4200 / vendor.bundle.js：5727：16 ）

Unhandled Promise rejection: Template parse errors: There is no directive with "exportAs" set to "ngModel" ("urrent Password ]#currentPassword="ngModel" id="currentPassword" name="currentPassword" type="text" class="form-co"): ChangePasswordComponent@5:4 ; Zone: ; 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 ]#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)

推荐答案

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

You are using an odd mix of template driven and model driven form. Choose either and do not mix those two. So here is sample on the model-driven form:

无需设置必需 c或 minlength 在模板中，我们处理组件中的thid。另外，我们不需要任何 ngModel ，名称等，因为我们使用的是 formControlName 。还要删除＃f = ngForm ，因为它与模板驱动的表单有关。所以您的模板应如下所示：

No need to set required or minlength in template, we handle thid in the component. Also we do not need any ngModel, name etc, since we use formControlName. Also remove #f="ngForm" as that is related to template-driven form. So your template should look like this:

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

在构建表单时，我们设置了所需的所有验证器，在这种情况下，必需和 minLength ：

And when building the form, we set all validators we need, in this case required and minLength:

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

就是这样！ ：）

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

I suggest you read about forms, here is the guide for template driven forms and guide for reactive forms

编辑：

对于表单验证，检查 官方文档 验证。如果您有很多字段，则可能需要调整其解决方案，将所有格式错误存储在单独的对象中。

For form validation, check the official docs for form validation. If you have plenty fields, you might want to adapt their solution, where storing all form errors in a separate object.

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

But here is a basic solution to check for form errors for each form control. So the following would be for your validations:

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

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

You might also want to show perhaps error messages when field is touched (??). This all you can find in the link I provided for validation :)

更新的演示

这篇关于角度-没有指令与“ exportAs”一起使用设置为“ ngModel”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！