ngModel不能使用与父formGroup指令注册表单控件

Question

升级到RC5后，我们开始收到此错误：

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() 
}); 

    Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions: 

    Example: 


<div [formGroup]="myGroup"> 
    <input formControlName="firstName"> 
    <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}"> 
</div> 

它看起来像在RC5两个不能再一起使用，但我可以没有找到替代解决方案。

这里是产生异常的组件：

<select class="field form-control" [formGroup]="form" [(ngModel)]="cause.id" [name]="name"> 
<option *ngFor="let c of causes" [value]="c.text">{{c.text}}</option> 
</select> 

Answer 1

OK，终于得到了它的工作：看https://github.com/angular/angular/pull/10314#issuecomment-242218563

简单地说，你可以不再使用name属性的formGroup内，并且必须使用formControlName而不是

Answer 2

答案是正确的错误消息， 你需要指出它是独立的，因此它不会与冲突表单控件：

[ngModelOptions]="{standalone: true}" 

Answer 3

当你写formcontrolname角2不接受。您必须编写formControlName。它是关于大写的第二个单词。

<input type="number" [(ngModel)]="myObject.name" formcontrolname="nameFormControl"/> 

如果错误仍然conitnue尝试为所有对象（myObject）字段设置窗体控件。

开始 <form> </form>之间

例如：<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Answer 4

import { FormControl, FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms'; 
 

 

 
    this.userInfoForm = new FormGroup({ 
 
     userInfoUserName: new FormControl({ value: '' }, Validators.compose([Validators.required])), 
 
     userInfoName: new FormControl({ value: '' }, Validators.compose([Validators.required])), 
 
     userInfoSurName: new FormControl({ value: '' }, Validators.compose([Validators.required])) 
 
    });

<form [formGroup]="userInfoForm" class="form-horizontal"> 
 
      <div class="form-group"> 
 
       <label class="control-label"><i>*</i> User Name</label> 
 
        <input type="text" formControlName="userInfoUserName" class="form-control" [(ngModel)]="userInfo.userName"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="control-label"><i>*</i> Name</label> 
 
        <input type="text" formControlName="userInfoName" class="form-control" [(ngModel)]="userInfo.name"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="control-label"><i>*</i> Surname</label> 
 
        <input type="text" formControlName="userInfoSurName" class="form-control" [(ngModel)]="userInfo.surName"> 
 
      </div> 
 
</form>

Answer 5

扩展在@AvenirÇokaj的回答

作为一个新手，即使我没有明确的先了解该错误消息。

错误消息指出的是，在formGroup中，有一个元素在formControl中没有被计入。 （有意/无意）

如果您打算不验证此字段，但仍希望在此输入元素上使用ngModel，请添加标志以表明它是独立组件，无需验证，如上面@Avenir所述。