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 и tags), но у вас есть директива formControlName только для двух из них (название и артикуляция, но не теги).

Если в вашем поле отсутствует директива formControlName , а у него есть атрибут ngModel (что имеет место с вводом тега), вы получите эту ошибку.

В моем случае я столкнулся, все мои поля обладали ngModel и директивой formControlName, кроме той, которая имела только ngModel. Я добавил его на вкладку, и все было в порядке.

Итак, добавьте директиву formControlName на свой тег-вход, и он должен работать нормально.