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),但是你只有两个(form和articledescription,但不是标签)有一个formControlName指令.

如果你的某个字段缺少formControlName指令,而他有一个ngModel属性(这是tag-input的情况),你将收到此错误.

在我遇到的情况下,我的所有字段都有一个ngModel 和一个formControlName指令,只有一个只有一个ngModel.我把它添加到输入中,没关系.

因此,在tag-input上添加formControlName指令,它应该可以正常工作.