首页 文章

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

提问于
浏览 次
4

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

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 has imports

............
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”（“urrent密码”#currentPassword =“ngModel”id =“currentPassword”name =“currentPassword”type =“text”class =“form-co”）：在SyntaxError.ZoneAwareError（http：// localhost：4200 / polyfills.bundle.js：6884：33）的SyntaxError.BaseError [作为构造函数]（http：// localhost）中的ChangePasswordComponent @ 5：4 ：4200 / vendor.bundle.js：64475：16）新的SyntaxError（http：// localhost：4200 / vendor.bundle.js：5727：16）

angular angular2-forms angular2-ngmodel

3 回答

  • 0

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

    无需在模板中设置 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)]))
  });
}

    就是这样了！ :)

    我建议你阅读一下表格，这里是 the guide for template driven forms 和 guide for reactive forms

    EDIT:

    对于表单验证，请检查 official docs 以进行表单验证 . 如果您有足够的字段，则可能需要调整其解决方案，将所有表单错误存储在单独的对象中 .

    但这是一个检查每个表单控件的表单错误的基本解决方案 . 以下是您的验证：

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

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

    Updated Demo

    回复于
  • 7

    从'@ angular / forms'添加import ;到你的app.module.ts和导入数组中你需要添加FormsModule .

    答案很晚，但如果有人在角度5中遇到问题，你需要这样做 .

    回复于
  • 2

    这可能会帮助Angular 6中的某个人 .

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

    回复于

相关问题