ngModel non può essere utilizzato per registrare i controlli del modulo con una direttiva formGroup padre

Dopo l'aggiornamento a RC5 abbiamo iniziato a ricevere questo errore:

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>

Sembra che in RC5 i due non possano più essere usati insieme, ma non sono riuscito a trovare una soluzione alternativa.

Ecco il componente che produce l'eccezione:

    <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 risposta è giusta sul messaggio di errore, è necessario indicare che è autonomo e quindi non è in conflitto con i controlli del modulo:

[ngModelOptions]="{standalone: true}"

Espandendo la risposta di @Avenir Çokaj

Essendo un principiante anche io all'inizio non ho capito chiaramente il messaggio di errore.

Ciò che il messaggio di errore indica è che nel tuo formGroup hai un elemento che non viene considerato nel tuo formControl. (Intenzionalmente / Accidentalmente)

Se intendi non convalidare questo campo ma desideri comunque utilizzare ngModel su questo elemento di input, aggiungi il flag per indicare che si tratta di un componente autonomo senza la necessità di convalida come menzionato da @Avenir sopra.

OK, finalmente funziona: vedi https://github.com/angular/angular/pull/10314#issuecomment-242218563

In breve, non puoi più usare l' nameattributo all'interno di un formGroup, e devi usareformControlName invece

quando scrivi formcontrolname Angular 2 non accetto. Devi scrivere formControlName . si tratta di seconde parole maiuscole.

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

se l'errore persiste, provare a impostare il controllo del modulo per tutto il campo oggetto (mioOggetto).

tra l'inizio <form> </form>per esempio:<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Se il componente ha più di un modulo, registrare tutti i controlli e i moduli

Avevo bisogno di sapere perché questo stava accadendo in un determinato componente e non in qualsiasi altro componente.

Il problema era che avevo 2 moduli in un componente e il secondo modulo non aveva ancora [formGroup]e non era ancora registrato poiché stavo ancora costruendo i moduli.

Sono andato avanti e ho completato la scrittura di entrambi i moduli senza lasciare un input non registrato che risolvesse il problema.

Ho appena ricevuto questo errore perché non ho racchiuso tutti i controlli del modulo all'interno divdi un formGroupattributo.

Ad esempio, questo genererà un errore

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

Questo può essere abbastanza facile da perdere se è una forma particolarmente lunga.

Se vuoi usare [formGroup]con formControlName, devi sostituire l' nameattributo con formControlNameformControlName.

Esempio:

Questo non funziona perché utilizza l' attributo [formGroup]e name.

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

Dovresti sostituire l' nameattributo con formControlNamee funzionerà correttamente in questo modo:

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

Sembra che tu stia utilizzando ngModel nello stesso campo modulo di formControlName. Il supporto per l'utilizzo della proprietà di input ngModel e dell'evento ngModelChange con le direttive del modulo reattivo è stato deprecato in Angular v6 e verrà rimosso in Angular v7

Questo errore viene visualizzato quando sono presenti alcuni controlli del modulo (come Inputs, Selects, ecc.) Nei tag del gruppo del modulo senza proprietà formControlName.

Questi esempi generano l'errore:

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

Ci sono due modi, lo stand alone:

<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 includendolo nel formgroup

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

L'ultimo implica definirli nel form di inizializzazione Group

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