Angular2:ngModel不能用父指令formGroup来注册表单控件

Question

最近，我更新了我的angular2项目到2.0.2版本，当我使用输入标签时，我得到了以下错误，

错误,

Uncaught (in promise): Error: Error in app/articles/articles.html:42:20 caused by: 
  ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
  formGroup's partner directive "formControlName" instead.  Example:

<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
   firstName: new FormControl()
});

我的模板,

<div *ngIf = 'showform'>
  <form class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate="novalidate">
    <div class="form-process"></div>
    <div class="col_full">
        <label for="template-contactform-name">Title</label>
        <input type="text" formControlName="articletitle" placeholder="Title" class="sm-form-control required" aria-required="true">
    </div>
    <div class="clear"></div>
    <div class="col_full">
        <label for="template-contactform-message">Description</label>
        <textarea class="required sm-form-control" formControlName="articledescription" placeholder="Description" rows="6" cols="30" aria-required="true"></textarea>
    </div>
    <div class="clear"></div>
<div class="col_full">
        <label >Tags</label>
         <tag-input [ngModel]="['@item']"
           [autocompleteItems]="['Item1', 'item2', 'item3']"
           [autocomplete]="true">
</tag-input> 
    <div class="col_full">
        <button class="button button-3d nomargin" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Save</button>
    </div>
  </form>
</div>

我的组件,

this.form = new FormGroup({
               articletitle: new FormControl(''),
               articledescription: new FormControl(''),
               tags: new FormControl('')
    });

ngModule.ts,

    import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Category }  from './categories/category';
import { Login }  from './login/login';
import { Mainapp }  from './components/app.component';
import { Topics }  from './topics/topics';
import { SignUp }  from './signup/signup';
import { Articles }  from './articles/articles';
import { Article }  from './article/article';
import { User }  from './user/user';
import { HttpModule } from '@angular/http';
import { RouterModule }   from '@angular/router';
import { TagInputModule } from 'ng2-tag-input';
import { App }  from './tags/tags';

// import { TagInputModule } from 'ng2-tag-input';
// import {Ng2TagsInputModule} from 'ng2-tagsinput';
@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule,FormsModule,TagInputModule,HttpModule,
      RouterModule.forRoot([
      { path: '', component:Login },
      { path: 'login', component:Login },
      { path: 'signup', component: SignUp },
      { path: 'categories', component: Category },
      { path: 'topics/:id', component: Topics },
      { path: 'articles/:id', component: Articles },
      { path: 'article/:id', component: Article },
      { path: 'user', component: User },
            { path: 'app', component: App },

    ])],
  declarations: [ Mainapp,App,Login,SignUp,Category,Topics,Articles,Article,User ]
  ,bootstrap: [ Mainapp ]
})
export class AppModule { }

我不知道是什么错误，谁能建议帮助

Answer 1

我知道这是一个老问题，但是今天早上我遇到了同样的问题，终于找到了解决方案，我注意到你比我错过了同样的事情。

你有三个字段/输入(articletitle, articledescription和标签)，但你有一个formControlName指令只有其中两个(标题和articledescription，但不是标签)。

如果你的一个字段缺少formControlName指令而他有一个ngModel属性(这是tag-input的情况)，你会得到这个错误。

在我的情况下，我遇到，我所有的字段都有一个ngModel 和一个formControlName指令，除了一个只有ngModel。我把它添加到输入，它是ok的。

所以，在你的标签输入上添加formControlName指令，它应该工作得很好。