Angular 2错误-在RC4版本中,没有将“ exportAs”设置为“ ngModel”的指令

萨西·迪维雅(Sasi Dhivya)

我在我的应用程序中使用angular 2表单,并且我已经基于给定的链接创建了表单。

https://angular.io/docs/ts/latest/guide/forms.html

在此进行验证和使用表单API的过程中,我已设置了ngModel诸如#name="id" #id="ngModel",这将引发脚本错误。但是如果我设置#id="ngModel"为,它就解决了#id="ngForm"但就我而言,我必须将模型值设置为ngModel

以下是我的html页面。

 <form (ngSubmit)="onSubmit()" #myForm="ngForm">
  <div class="form-group">
  <label class="control-label" for="id">Employee ID</label>
    <input type="text" class="form-control" required [(ngModel)]="model.id" #name="id"  #id="ngModel" >
    <div [hidden]="id.valid || id.pristine" class="alert alert-danger">
      Employee ID is required
    </div>
  </div>
  <div class="form-group">
    <label for="name">Employee Name</label>
    <input type="text" class="form-control" [(ngModel)]="model.name" name="name" #name="ngModel" required>
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
      Employee ID is required
        </div>
  </div>
  <div class="form-group">
    <label for="DOJ">DOJ</label>
    <input class="form-control" required [(ngModel)]="model.DOJ" name="DOJ" #DOJ="ngModel"  />
    <div [hidden]="DOJ.valid || DOJ.pristine" class="alert alert-danger">
      DOJ is required
    </div>
  </div>
  <button type="submit" class="btn btn-default" [disabled]="!myForm.form.valid">Submit</button>
</form>

以下是我的问题。

      EXCEPTION: Template parse errors:
       There is no directive with "exportAs" set to "ngModel" ("
         <div>
          <h1>My Form</h1>
             <form (ngSubmit)="onSubmit()" [ERROR ->]#myForm="ngModel">
             <div class="form-group>
            <label class="control-label" for="id">Employee"):AppComponent@3:34

我检查了更多的问题和答案,其中大多数人说将angular2版本更新为,RC4因此我已将我的应用程序更新为rc4,但我仍然面临此问题。

以下是我的ts文件:

import {Component} from '@angular/core';
import { disableDeprecatedForms, provideForms , NgForm} from '@angular/forms';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/common';


@Component({
selector: 'ej-app',    
templateUrl: 'app/app.component.html',
directives: [ CORE_DIRECTIVES,FORM_DIRECTIVES]  
})
  export class AppComponent {
  model = new Employees(null,'','');
    onSubmit() { alert("values submitted")}
   constructor() {
     }
     }
        export class Employees {
         constructor( public id: number,public name: string, public DOJ: String ) {  }
}
贡特·佐赫鲍尔(GünterZöchbauer)

不要混用新旧表单模块。

import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/common';

从...进口物品@angular/common如果您使用新表格

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms()])

然后改用

import {FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/forms';

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

单元测试中的错误(因果)。没有将“ exportAs”设置为“ ngbPopover”的指令

来自分类Dev

模板解析错误:没有将“ exportAs”设置为“ cdkDropList”的指令

来自分类Dev

模板变量导致模板解析错误:没有将“exportAs”设置为“#start_date”的指令

来自分类Dev

没有将“exportAs”设置为“stat.dpndcyDt”的指令

来自分类Dev

如何从Angular 2+中的指令访问NgModel

来自分类Dev

错误:模板解析错误:没有将“ exportAs”设置为“ matAutocomplete”(“” auto“ [formControl] =” ...“

来自分类Dev

Angular ngModel与指令

来自分类Dev

angular:嵌套指令ngmodel

来自分类Dev

使用指令Angular 2更改输入的ngModel值

来自分类Dev

扩展Angular 2 ngModel指令以使用可观察对象

来自分类Dev

Angular指令不会触发ngModel中的更改事件

来自分类Dev

无法在Kendo Grid中的指令中注入Angular ngModel

来自分类Dev

如何在Angular2中使用不带ngModel的双向绑定编写自定义指令

来自分类Dev

Angular 2+ - 当 ngIf 导致隐藏时将 ngModel 设置为 null

来自分类Dev

避免写入 ngModel [Angular] 的指令

来自分类Dev

Angular 2 RC4中的表格

来自分类Dev

属性在ngModel(Angular 2)中不起作用,错误

来自分类Dev

Angular JS缺少必需的控制器错误:找不到指令所需的控制器“ ngModel”

来自分类Dev

Angular 9-自定义指令中的NgModel更改了Angular 7的行为

来自分类Dev

为什么我的角度自定义datepicker指令将ng-repeat中的datepickers的ngModel设置为undefined?

来自分类Dev

Angular指令-如何使用JQuery将ngModel和ngBind添加到自定义指令元素?

来自分类Dev

将ngModel而不是值绑定到用于货币输入的自定义Angular指令

来自分类Dev

Angular指令将ngmodel值从null更改为未定义的中断验证

来自分类Dev

ngModel未在指令中绑定

来自分类Dev

带有CKEditor设置的最新Angular2版本

来自分类Dev

学习Angular2 TypeScript2:共享类没有指令错误

来自分类Dev

在angular2 RC4中加载时出现错误:错误:XHR错误(找不到404)加载

来自分类Dev

Angular 2 RC3“没有为RouterOutletMap提供程序!” 错误

来自分类Dev

如何将Angular2 ngModel用于聚合物纸张输入?错误:“”没有值访问器

Related 相关文章

  1. 1

    单元测试中的错误(因果)。没有将“ exportAs”设置为“ ngbPopover”的指令

  2. 2

    模板解析错误:没有将“ exportAs”设置为“ cdkDropList”的指令

  3. 3

    模板变量导致模板解析错误:没有将“exportAs”设置为“#start_date”的指令

  4. 4

    没有将“exportAs”设置为“stat.dpndcyDt”的指令

  5. 5

    如何从Angular 2+中的指令访问NgModel

  6. 6

    错误:模板解析错误:没有将“ exportAs”设置为“ matAutocomplete”(“” auto“ [formControl] =” ...“

  7. 7

    Angular ngModel与指令

  8. 8

    angular:嵌套指令ngmodel

  9. 9

    使用指令Angular 2更改输入的ngModel值

  10. 10

    扩展Angular 2 ngModel指令以使用可观察对象

  11. 11

    Angular指令不会触发ngModel中的更改事件

  12. 12

    无法在Kendo Grid中的指令中注入Angular ngModel

  13. 13

    如何在Angular2中使用不带ngModel的双向绑定编写自定义指令

  14. 14

    Angular 2+ - 当 ngIf 导致隐藏时将 ngModel 设置为 null

  15. 15

    避免写入 ngModel [Angular] 的指令

  16. 16

    Angular 2 RC4中的表格

  17. 17

    属性在ngModel(Angular 2)中不起作用,错误

  18. 18

    Angular JS缺少必需的控制器错误:找不到指令所需的控制器“ ngModel”

  19. 19

    Angular 9-自定义指令中的NgModel更改了Angular 7的行为

  20. 20

    为什么我的角度自定义datepicker指令将ng-repeat中的datepickers的ngModel设置为undefined?

  21. 21

    Angular指令-如何使用JQuery将ngModel和ngBind添加到自定义指令元素?

  22. 22

    将ngModel而不是值绑定到用于货币输入的自定义Angular指令

  23. 23

    Angular指令将ngmodel值从null更改为未定义的中断验证

  24. 24

    ngModel未在指令中绑定

  25. 25

    带有CKEditor设置的最新Angular2版本

  26. 26

    学习Angular2 TypeScript2:共享类没有指令错误

  27. 27

    在angular2 RC4中加载时出现错误:错误:XHR错误(找不到404)加载

  28. 28

    Angular 2 RC3“没有为RouterOutletMap提供程序!” 错误

  29. 29

    如何将Angular2 ngModel用于聚合物纸张输入?错误:“”没有值访问器

热门标签

归档