exportAs

exportAs

关注
发信
关注(28)粉丝(399)

Angular 2 错误 - 没有带有“exportAs"的指令；设置为“ngModel"带有 RC4 版本

本文介绍了Angular 2 错误 - 没有带有“exportAs"的指令；设置为“ngModel"带有 RC4 版本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的应用程序中使用了 angular 2 表单，并且我已经根据给定的链接创建了表单.

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

为了验证和使用表单 API，我设置了 ngModel 值，例如 #name="id" #id="ngModel" 并抛出脚本错误.但是如果我将 #id="ngModel" 设置为 #id="ngForm"，它就解决了.但就我而言，我必须将模型值设置为 ngModel.

下面是我的 html 页面.

 <div class="form-group"><label class="control-label" for="id">员工 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">必须提供员工 ID

<div class="form-group"><label for="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">必须提供员工 ID

<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">司法部是必需的

<button type="submit" class="btn btn-default" [disabled]="!myForm.form.valid">提交</button></表单>

下面是我的问题.

 例外:模板解析错误:没有将exportAs"设置为ngModel"(<div><h1>我的表单</h1><form (ngSubmit)="onSubmit()" [错误 ->]#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';从@angular/common"导入 {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup };@成分({选择器:'ej-app'，templateUrl: 'app/app.component.html',指令:[ CORE_DIRECTIVES,FORM_DIRECTIVES]})导出类 AppComponent {模型 = 新员工(空，''，'');onSubmit() { alert("提交的值")}构造函数(){}}出口类员工{构造函数(公共 ID:编号，公共名称:字符串，公共司法部:字符串){ }}
解决方案

不要混用新旧表单模块.

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';

I am using angular 2 forms in my application and i have created the forms based on given link.

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

In this for validation and to use forms APIs, i have set the ngModel values like #name="id" #id="ngModel" and which throws script error. But its resolved if i set #id="ngModel" as #id="ngForm". But for my case i have to set my model value to ngModel.

Below is my html page.

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

Below is my issue.

      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

I have checked with more questions and answers, most of them said to update angular2 version to RC4 so i have updated my application to rc4 but still i am facing this issue.

Below is my ts file:

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 ) {  }
}
解决方案

Don't mix the new and old forms module.

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

imports forms stuff from @angular/common. If you use the new forms 

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

then use instead

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

这篇关于Angular 2 错误 - 没有带有“exportAs"的指令；设置为“ngModel"带有 RC4 版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 01:37
Powered by LMLPHP ©2024 exportAs 0.037565