Angular2错误：没有将“exportAs”设置为“ngForm”的指令

时间：2016-07-28 23:42:29

标签： angular typescript angular2-forms

我在RC4上，我收到错误由于我的模板，“exportAs”设置为“ngForm”没有指令：

<div class="form-group">
        <label for="actionType">Action Type</label>
        <select
            ngControl="actionType" 
      ===>  #actionType="ngForm" 
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

boot.ts：

import {disableDeprecatedForms, provideForms} from '@angular/forms'; 

 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HTTP_PROVIDERS, Http} from '@angular/http';
 import {provideRouter} from '@angular/router';

import {APP_ROUTER_PROVIDER} from './routes';

import {AppComponent} from './app.component';

bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), APP_ROUTER_PROVIDER, HTTP_PROVIDERS]);

///所以这是我的DropdownList：

<fieldset ngControlGroup="linkedProcess" >
                     <div ngControlGroup="Process" >
                         <label>Linked Process</label>
                          <div class="form-group">       
        <select 
            ngModel
            name="label" 
            #label="ngModel" 
            id="label" 
            class="form-control" required
            (change)="reloadProcesse(list.value)" 
            #list>
            <option value=""></option>
            <!--<option value=`{{ActionFormComponent.getFromString('GET'')}}`></option>-->                 
            <option *ngFor="let processus of linkedProcess?.processList?.list; let i = index" 
            value="{{ processus[i].Process.label}}">
                {{processus.Process.label}}
            </option>
        </select> 
        </div>
     </div>

//我的组件ts：

我用旧的形式代表它：

 categoryControlGroups:ControlGroup[] = [];
     categories:ControlArray = new ControlArray(this.categoryControlGroups);

现在我正在这样做：

categoryControlGroups:FormGroup[] = [];
     categories:FormArray = new FormArray(this.categoryControlGroups);

你认为这是问题的原因吗？

11 个答案:

答案 0 :(得分：79)

自2.0.0.rc6：

  

表单：已弃用的provideForms()和disableDeprecatedForms()函数已被删除。请改为从FormsModule导入ReactiveFormsModule或@angular/forms。

简而言之：

所以，添加到您的app.module.ts 或等效内容：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // <== add the imports!

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,                               // <========== Add this line!
    ReactiveFormsModule                        // <========== Add this line!
  ],
  declarations: [
    AppComponent
    // other components of yours
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

如果没有其中一个模块可能会导致错误，包括您面临的错误：

  

无法绑定到＆＃39; ngModel＆＃39;因为它不是“输入”的已知属性。

     

无法绑定到＆＃39; formGroup＆＃39;因为它不是“＃form;

”的已知属性      

＆＃34; exportAs＆＃34;没有指令设置为＆＃34; ngForm＆＃34;

如果您有疑问，you can provide both FormsModule和ReactiveFormsModule在一起，但它们是完全兼容的。当您提供其中一个模块时，该模块的默认表单指令和提供程序将可供您在应用程序范围内使用。

使用ngControl的旧表单？

如果你的@NgModule确实有这些模块，那么你可能正在使用旧的指令，例如ngControl，这是一个问题，因为那里没有ngControl新形式。它被ngModel替换为或多或少 *。

例如，相当于<input ngControl="actionType">的是<input ngModel name="actionType">，因此请在模板中进行更改。

同样，控件中的导出不再是ngForm，现在是ngModel。因此，在您的情况下，请将#actionType="ngForm"替换为#actionType="ngModel"。

因此生成的模板应该是（===> s，其中已更改）：

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
  ===>  ngModel
  ===>  name="actionType" 
  ===>  #actionType="ngModel" 
        id="actionType" 
        class="form-control" 
        required>
        <option value=""></option>
        <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
            {{ actionType.label }}
        </option>
    </select> 
</div>

*或多或少，因为ngControl的所有功能都未移至ngModel。有些刚被删除或现在不同。一个例子是name属性，就是你现在的情况。

答案 1 :(得分：58)

我遇到了同样的问题。我错过了app.module.ts

中的表单模块导入标记 
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [BrowserModule,
        FormsModule
    ],

答案 2 :(得分：9)

我有同样的问题，通过将FormsModule添加到.spec.ts来解决：

import { FormsModule } from '@angular/forms';

然后将导入添加到beforeEach：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ FormsModule ],
    declarations: [ YourComponent ]
  })
.compileComponents();
}));

答案 3 :(得分：4)

就我而言，我必须将FormsModule和ReactiveFormsModule添加到shared.module.ts：

（感谢code example的@Undrium）：

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { }

答案 4 :(得分：2)

现在Angular2中正确的使用方式是：

<form  (ngSubmit)="onSubmit()">

        <label>Username:</label>
        <input type="text" class="form-control"   [(ngModel)]="user.username" name="username" #username="ngModel" required />

        <label>Contraseña:</label>
        <input type="password" class="form-control"  [(ngModel)]="user.password" name="password" #password="ngModel" required />


    <input type="submit" value="Entrar" class="btn btn-primary"/>

</form>

旧的方式不再适用

答案 5 :(得分：2)

我遇到了这个问题，我意识到我没有将组件绑定到变量上。

已更改

<input #myComponent="ngModel" />

到

<input #myComponent="ngModel" [(ngModel)]="myvar" />

答案 6 :(得分：0)

我遇到了这个问题，因为我的模板[[ngModel]]]附近有一个拼写错误。额外支架。例如：

<input id="descr" name="descr" type="text" required class="form-control width-half"
      [ngClass]="{'is-invalid': descr.dirty && !descr.valid}" maxlength="16" [(ngModel)]]="category.descr"
      [disabled]="isDescrReadOnly" #descr="ngModel">

答案 7 :(得分：0)

请确认您同时具有两个ngModel and name属性。另外Select是一个表单组件，而不是整个表单，因此，本地引用的更多逻辑声明将是：-

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
            ngControl="actionType" 
      ===>  #actionType="ngModel"
            ngModel    // You can go with 1 or 2 way binding as well
            name="actionType"
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

另一件重要的事情是，确保在模板驱动方法的情况下导入FormsModule，在响应式方法的情况下确保ReactiveFormsModule。或者，您也可以同时导入两者。

答案 8 :(得分：0)

如果您正在获取此信息，则：

  

错误：模板解析错误：

     

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

哪个是reported as a bug in github，那么可能不是错误，因为您可能会这样做：

  1. 存在语法错误（例如，一个额外的括号：[(ngModel)]]=），或者
  2. 是将反应性表单指令混在一起，例如formControlName，与ngModel指令。由于"has been deprecated in Angular v6 and will be removed in Angular v7"混合了两种形式策略，因此可以做到：
  
      

  • 似乎就像正在使用的实际ngModel指令一样，但实际上，它是反应形式指令上名为ngModel的输入/输出属性，它只是近似（部分）其行为。具体来说，它允许获取/设置值并拦截值事件。但是， ngModel的某些其他功能-例如，延迟使用ngModel选项的更新或导出指令-根本不起作用（。 ..）

    •   

  • 此模式混合了模板驱动和被动表单策略，我们通常不建议这样做，因为它没有充分利用两种策略的全部优点。 （...）

    •   

  • 要在v7之前更新代码，您将决定是否坚持使用响应式表单指令（并使用响应式表单模式获取/设置值）或切换模板驱动的指令。

    •   

当您有这样的输入时：

<input formControlName="first" [(ngModel)]="value">

它将在浏览器的控制台中显示有关混合格式策略的警告：

  

您似乎在与ngModel相同的表单字段上使用formControlName。

但是，如果您将ngModel作为值添加到引用变量中，则示例：

<input formControlName="first" #firstIn="ngModel" [(ngModel)]="value">

然后会触发上述错误，并且不会显示有关策略混合的警告。

答案 9 :(得分：0)

还意识到当尝试将反应形式和模板形式方法结合时会出现此问题。我在同一元素上有#name="ngModel"和[formControl]="name"。删除其中一个解决了该问题。同样不是说如果您使用#name=ngModel，还应该具有诸如[(ngModel)]="name"这样的属性，否则，您仍然会得到错误。这也适用于角度6、7和8。

答案 10 :(得分：0)

如果ngModule在输入中不起作用，则表示尝试...删除ngModule周围的双引号

喜欢

<input #form="ngModel" [(ngModel)]......></input>

而不是上面的

<input #form=ngModel [(ngModel)]......></input> try this
相关问题
最新问题