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所述。