ngModel no se puede utilizar para registrar controles de formulario con una directiva formGroup principal

Después de actualizar a RC5, comenzamos a recibir este error:

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 en RC5 los dos ya no se pueden usar juntos, pero no pude encontrar una solución alternativa.

Aquí está el componente que produce la excepción:

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

La respuesta está correcta en el mensaje de error, debe indicar que es independiente y, por lo tanto, no entra en conflicto con los controles del formulario:

[ngModelOptions]="{standalone: true}"

Ampliando la respuesta de @Avenir Çokaj

Siendo un novato, incluso yo no entendí claramente el mensaje de error al principio.

Lo que indica el mensaje de error es que en su formGroup tiene un elemento que no se tiene en cuenta en su formControl. (Intencionalmente / accidentalmente)

Si tiene la intención de no validar este campo pero aún desea usar ngModel en este elemento de entrada, agregue la marca para indicar que es un componente independiente sin necesidad de validación como se menciona en @Avenir anteriormente.

Bien, finalmente lo hice funcionar: consulte https://github.com/angular/angular/pull/10314#issuecomment-242218563

En resumen, ya no puede usar nameatributos dentro de a formGroup, y debe usar formControlNameen su lugar

cuando escribe formcontrolname Angular 2 no acepta. Tienes que escribir formControlName . se trata de segundas palabras en mayúscula.

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

si el error aún continúa, intente establecer el control de formulario para todo el campo del objeto (myObject).

entre inicio <form> </form>por ejemplo:<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Si el componente tiene más de 1 formulario, registre todos los controles y formularios

Necesitaba saber por qué sucedía esto en un determinado componente y no en ningún otro componente.

El problema era que tenía 2 formularios en un componente y el segundo formulario aún no [formGroup]estaba registrado ni estaba registrado ya que todavía estaba creando los formularios.

Seguí adelante y terminé de escribir ambos formularios completos sin dejar una entrada no registrada que resuelva el problema.

Recibí este error porque no incluí todos mis controles de formulario dentro de divun formGroupatributo.

Por ejemplo, esto arrojará un error

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

Esto puede ser bastante fácil de pasar por alto si es una forma particularmente larga.

Si desea utilizar [formGroup]con formControlName, debe reemplazar el nameatributo con formControlNameformControlName.

Ejemplo:

Esto no funciona porque usa el atributo [formGroup]y name.

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

Debe reemplazar el nameatributo por formControlNamey funcionará bien de la siguiente manera:

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

Parece que está usando ngModel en el mismo campo de formulario que formControlName. El soporte para usar la propiedad de entrada ngModel y el evento ngModelChange con directivas de formulario reactivo ha quedado obsoleto en Angular v6 y se eliminará en Angular v7

Este error aparece cuando tiene algunos controles de formulario (como Entradas, Selecciones, etc.) en sus etiquetas de grupo de formulario sin la propiedad formControlName.

Esos ejemplos arrojan el error:

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

Hay dos formas, la independiente:

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

O incluirlo en el grupo de formularios

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

El último implica definirlos en el formulario de inicialización Grupo

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