Angular2：ngModelは親とフォームコントロールを登録するために使用することはできませんformGroupディレクティブ

Question

私は、次のエラーを得たinputタグを使用するときに最近、私は、2.0.2バージョンに

エラーを私angular2プロジェクトを更新し、

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

これは古い質問ですが、私は今朝同じ問題に直面していましたが、最終的に解決策を見つけました。私はあなたと同じものを見逃していました。

3つのフィールド/入力（articletitle、articledescription、およびtags）がありますが、2つのformControlNameディレクティブ（titleとarticledescriptionはタグではありません）があります。

フィールドの1つにformControlNameディレクティブがあり、にngModel属性（タグ入力の場合）がある場合、このエラーが発生します。

私のケースでは、すべてのフィールドにngModel とというformControlNameディレクティブがありましたが、ngModelだけのものは例外でした。私はそれを入力に加えました。それは大丈夫でした。

したがって、タグ入力にformControlNameディレクティブを追加しても問題ありません。