ngModel não pode ser usado para registrar controles de formulário com uma diretiva formGroup pai

Depois de atualizar para RC5, começamos a receber este erro:

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>

Parece que no RC5 os dois não podem mais ser usados ​​juntos, mas não consegui encontrar uma solução alternativa.

Aqui está o componente que produz a exceção:

    <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>

A resposta está certa na mensagem de erro, você precisa indicar que é autônomo e, portanto, não entra em conflito com os controles do formulário:

[ngModelOptions]="{standalone: true}"

Expandindo a resposta de @Avenir Çokaj

Mesmo sendo um novato, não entendi claramente a mensagem de erro no início.

O que a mensagem de erro indica é que em seu formGroup você tem um elemento que não é contabilizado em seu formControl. (Intencionalmente / acidentalmente)

Se você pretende não validar este campo, mas ainda deseja usar o ngModel neste elemento de entrada, adicione o sinalizador para indicar que ele é um componente independente sem a necessidade de validação, conforme mencionado por @Avenir acima.

OK, finalmente consegui funcionar: consulte https://github.com/angular/angular/pull/10314#issuecomment-242218563

Em resumo, você não pode mais usar o nameatributo em um formGroupe deve usar em seu formControlNamelugar

quando você escreve formcontrolname Angular 2 não aceita. Você tem que escrever formControlName . trata-se de segundas palavras em maiúsculas.

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

se o erro ainda persistir, tente definir o controle do formulário para todos os campos do objeto (meuObjeto).

entre o início, <form> </form>por exemplo:<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Se o componente tiver mais de 1 formulário, registre todos os controles e formulários

Eu precisava saber por que isso estava acontecendo em um determinado componente e não em qualquer outro componente.

O problema era que eu tinha 2 formulários em um componente e o segundo formulário ainda não tinha [formGroup]e ainda não estava registrado, pois ainda estava criando os formulários.

Fui em frente e completei escrevendo os dois formulários completos sem deixar uma entrada não registrada que resolva o problema.

Acabei de receber este erro porque não incluí todos os meus controles de formulário em a divcom um formGroupatributo.

Por exemplo, isso gerará um erro

<div [formGroup]='formGroup'>
</div>
<input formControlName='userName' />

Isso pode ser muito fácil de perder se for um formulário particularmente longo.

Se você deseja usar [formGroup]com formControlName, deve substituir o nameatributo por formControlNameformControlName.

Exemplo:

Isso não funciona porque usa o atributo [formGroup]e name.

<div [formGroup]="myGroup">
   <input name="firstName" [(ngModel)]="firstName">
</div>

Você deve substituir o nameatributo por formControlNamee ele funcionará bem assim:

<div [formGroup]="myGroup">
   <input formControlName="firstName" [(ngModel)]="firstName">
</div>

Parece que você está usando ngModel no mesmo campo de formulário que formControlName. O suporte para usar a propriedade de entrada ngModel e o evento ngModelChange com diretivas de formulário reativas foi descontinuado no Angular v6 e será removido no Angular v7

Este erro aparece quando você tem alguns controles de formulário (como Inputs, Selects, etc) em suas tags de grupo de formulários sem a propriedade formControlName.

Esses exemplos geram o erro:

<form [formGroup]="myform">
    <input type="text">
    <input type="text" [ngmodel]="nameProperty">
    <input type="text" [formGroup]="myform" [name]="name">
</fom>

Existem duas maneiras, a autônoma:

<form [formGroup]="myform">
    <input type="text" [ngModelOptions]="{standalone: true}">
    <input type="text" [ngmodel]="nameProperty" [ngModelOptions]="{standalone: true}">
    <!-- input type="text" [formGroup]="myform" [name]="name" --> <!-- no works with standalone --
</form>

Ou incluindo-o no grupo de formulários

<form [formGroup]="myform">
    <input type="text" formControlName="field1">
    <input type="text" formControlName="nameProperty">
    <input type="text" formControlName="name">
</fom>

O último implica em defini-los no formulário de inicialização do Grupo

this.myForm =  new FormGroup({
    field1: new FormControl(''),
    nameProperty: new FormControl(''),
    name: new FormControl('')
});