Angular2错误：没有带“的指令；exportAs"；设置为"；ngForm"；

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

///下面是我的下拉列表：

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

现在我要做的是：

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

你认为这是问题的原因，因为：

表单：已删除已弃用的

provideForms（）

和

disableDeprecatedForms（）

函数。请从

@angular/forms

导入

表单模块

或

反应表单模块

简言之：

• 如果您使用您的

  @NgModule

• 如果您使用您的

  @NgModule

因此，添加到您的

app.module.ts

或等效程序中：

从'@angular/core'导入{NgModule}；
从“@angular/platform browser”导入{BrowserModule}；
从“@angular/forms”导入{FormsModule，ReactiveFormsModule}；//已更改的位置）：


动作类型
ngModel
=>name=“actionType”
==>#actionType=“ngModel”
id=“actionType”
class=“表单控制”
必需>
{{actionType.label}

*或多或少是因为并非
ngControl
的所有功能都已移至
ngModel
。有些刚刚被移除，或者现在已经不同了。一个例子是
name
属性，这正是您现在遇到的情况。
我也遇到了同样的问题。我错过了app.module.ts中的表单模块导入标记

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

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

我遇到了相同的问题，通过将FormsModule添加到.spec.ts中解决了这个问题：

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

然后将导入添加到beforeach：

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

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>


用户名：
相反的尼娜：

旧方法不再有效了
我遇到了这个问题，因为我在[（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">

在我的例子中，我不得不将
表单模块
和
反应表单模块
添加到
共享.module.ts
中：

（感谢@Undrium的支持）：

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

改变


到

检查您的选择中是否同时具有
ngModel和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>


动作类型
#actionType=“ngModel”
ngModel//您也可以使用单向或双向绑定
name=“actionType”
id=“actionType”
class=“表单控制”
必需>
{{actionType.label}

更重要的一点是，确保在模板驱动方法中导入
FormsModule
，或者在被动方法中导入
ReactiveFormsModule
。或者，您可以同时导入这两个文件，这也很好。
如果您得到的是以下内容：

错误：模板分析错误：

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

这可能不是一个bug，因为您可能：

语法错误（例如，额外的括号：
[（ngModel）]]=
），或
be混合反应式表单指令，例如
formControlName
，与
ngModel
指令。这是因为它混合了两种形式策略，因此：

看起来使用的是实际的
ngModel
指令，但实际上它是被动形式指令上名为
ngModel
的输入/输出属性，它只是近似（部分）其行为。具体来说，它允许获取/设置值并拦截值事件。然而，ngModel

的一些其他功能——如使用

ngModel

选项延迟更新或导出指令——根本不起作用（…）

这种模式混合了模板驱动和反应式表单策略，我们通常不推荐这种策略，因为它没有充分利用这两种策略的好处。（……）

要在v7之前更新代码，您需要决定是坚持被动表单指令（并使用被动表单模式获取/设置值）还是切换到模板驱动指令

当您有这样的输入时：

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

---

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

还意识到，在尝试组合反应式表单和模板表单方法时，会出现此问题。我在同一个元素上有

#name=“ngModel”

和

[formControl]=“name”

。删除其中一个修复了该问题。另外，如果您使用

#name=ngModel

，您还应该具有类似于这样的属性

[（ngModel）]=“name”

，否则，您仍然会得到错误。这也适用于角度6、7和8

如果

ngModule

在输入方式下不工作，请尝试…删除

ngModule

像

而不是上面

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

试试这个

您使用的是什么版本？你对表格进行了增强处理了吗？谢谢你的回答，当我更改表格时，我发现错误无法分配给引用或变量，它对你有什么影响吗？嗯。。它可能在别的地方。您在

*ngFor

中有

吗？（可能不起作用，但请尝试此操作，如果消息消失，请告诉我：

{{actionTypes[i].label}}

）是否有

*ngFor

内部的变量？请尝试将

*ngFor

内部的变量重命名为其他变量

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

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

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

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

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