ngModel nie może służyć do rejestrowania formantów formularzy z nadrzędną dyrektywą formGroup

Po aktualizacji do RC5 zaczęliśmy otrzymywać ten błąd:

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>

Wygląda na to, że w RC5 tych dwóch nie można już używać razem, ale nie mogłem znaleźć alternatywnego rozwiązania.

Oto komponent powodujący wyjątek:

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

Odpowiedź jest poprawna w komunikacie o błędzie, musisz wskazać, że jest samodzielny i dlatego nie powoduje konfliktu z kontrolkami formularza:

[ngModelOptions]="{standalone: true}"

Rozszerzenie odpowiedzi @Avenir Çokaj

Będąc nowicjuszem, nawet ja na początku nie zrozumiałem jasno komunikatu o błędzie.

Komunikat o błędzie wskazuje, że w formGroup masz element, który nie jest uwzględniany w formControl. (Celowo / przypadkowo)

Jeśli nie zamierzasz sprawdzać poprawności tego pola, ale nadal chcesz używać ngModel w tym elemencie wejściowym, dodaj flagę, aby wskazać, że jest to samodzielny komponent bez potrzeby walidacji, jak wspomniano powyżej w @Avenir.

OK, wreszcie działało: zobacz https://github.com/angular/angular/pull/10314#issuecomment-242218563

Krótko mówiąc, nie możesz już używać nameatrybutu w a formGroupi musisz go formControlNamezamiast tego używać

kiedy piszesz formcontrolname, Angular 2 nie akceptuje. Musisz napisać formControlName . chodzi o drugie wielkie litery.

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

jeśli błąd nadal występuje, spróbuj ustawić kontrolę formularza dla całego pola obiektu (myObject).

<form> </form>na przykład między startem :<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Jeśli komponent ma więcej niż 1 formularz, zarejestruj wszystkie kontrolki i formularze

Musiałem wiedzieć, dlaczego tak się dzieje w pewnym elemencie, a nie w żadnym innym.

Problem polegał na tym, że miałem 2 formularze w jednym komponencie, a drugi formularz jeszcze nie miał [formGroup]i nie był jeszcze zarejestrowany, ponieważ nadal tworzyłem formularze.

Poszedłem dalej i wypełniłem oba formularze kompletne bez pozostawiania niezarejestrowanych danych wejściowych, które rozwiązują problem.

Właśnie ten błąd, bo nie ująć wszystkie moje kontrole formie w obrębie divz formGroupatrybutu.

Na przykład spowoduje to błąd

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

Można to łatwo przeoczyć, jeśli jest to szczególnie długa forma.

Jeśli chcesz używać [formGroup]with formControlName, musisz zamienić nameatrybut na formControlNameformControlName.

Przykład:

To nie działa, ponieważ używa atrybutu [formGroup]i name.

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

Powinieneś zamienić nameatrybut na formControlNamei będzie działał dobrze w następujący sposób:

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

Wygląda na to, że używasz ngModel w tym samym polu formularza co formControlName. Obsługa używania właściwości wejściowej ngModel i zdarzenia ngModelChange z dyrektywami formularza reaktywnego została przestarzała w Angular v6 i zostanie usunięta w Angular v7

Ten błąd pojawia się, gdy masz jakieś kontrolki formularza (takie jak dane wejściowe, zaznaczenia itp.) W tagach grupy formularzy bez właściwości formControlName.

Te przykłady zgłaszają błąd:

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

Istnieją dwa sposoby, samodzielne:

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

Lub dołączając go do formgroup

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

Ostatnia z nich zakłada zdefiniowanie ich w inicjalizacji formGroup

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