ngModel, form denetimlerini bir üst formGroup yönergesi ile kaydetmek için kullanılamaz

RC5'e yükselttikten sonra şu hatayı almaya başladık:

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>

Görünüşe göre RC5'te ikisi artık birlikte kullanılamaz, ancak alternatif bir çözüm bulamadım.

İstisnayı oluşturan bileşen şu şekildedir:

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

Cevap, hata mesajında ​​doğrudur, bunun bağımsız olduğunu ve bu nedenle form kontrolleriyle çakışmadığını belirtmeniz gerekir:

[ngModelOptions]="{standalone: true}"

@Avenir Çokaj'ın cevabını genişletiyoruz

Acemi olduğum için hata mesajını ilk başta net olarak anlamadım.

Hata mesajının gösterdiği şey, formGroup'unuzda formControl'ünüzde hesaba katılmayan bir öğenizin olduğudur. (Kasıtlı / Yanlışlıkla)

Bu alanı doğrulamayı planlıyorsanız, ancak yine de bu giriş öğesinde ngModel'i kullanmak istiyorsanız, lütfen yukarıda @Avenir tarafından belirtildiği gibi doğrulamaya ihtiyaç duymadan bağımsız bir bileşen olduğunu belirtmek için bayrağı ekleyin.

Tamam, sonunda çalıştırdı: bkz. Https://github.com/angular/angular/pull/10314#issuecomment-242218563

Kısacası, artık namea içinde özniteliği kullanamazsınız formGroupve formControlNamebunun yerine kullanmanız gerekir

formcontrolname Angular 2 yazdığınızda kabul etmeyin. FormControlName yazmanız gerekir . büyük ikinci kelimeler hakkındadır.

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

hata hala devam ederse, tüm nesne (myObject) alanı için form denetimini ayarlamayı deneyin.

başlangıç ​​arasında <form> </form>örneğin:<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Bileşenin birden fazla formu varsa, tüm kontrolleri ve formları kaydedin

Bunun neden başka bir bileşende değil de belirli bir bileşende olduğunu bilmem gerekiyordu.

Sorun, bir bileşende 2 formum olması ve ikinci formun henüz [formGroup]formları oluşturduğum için henüz kayıtlı olmaması ve kaydedilmemesiydi.

Devam ettim ve sorunu çözen kayıtlı olmayan bir girdi bırakmadan her iki formu da tamamladım.

Bu hatayı yeni aldım çünkü tüm form kontrollerimi divbir formGroupözniteliğin içine koymadım .

Örneğin, bu bir hata atar

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

Özellikle uzun bir biçimse, bunu gözden kaçırmak oldukça kolay olabilir.

Kullanmak isterseniz [formGroup]birlikte formControlName, değiştirmek gerekir nameile niteliğiformControlNameformControlName .

Misal:

Bu, [formGroup]and nameözniteliğini kullandığı için çalışmaz .

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

nameÖzniteliği ile değiştirmelisiniz ve formControlNameaşağıdaki gibi düzgün çalışacaktır:

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

FormControlName ile aynı form alanında ngModel kullanıyormuşsunuz gibi görünüyor. NgModel input özelliğini ve ngModelChange olayını reaktif form direktifleriyle kullanma desteği, Angular v6'da kullanımdan kaldırıldı ve Angular v7'de kaldırılacak

Bu hata, form grubu etiketlerinizde formControlName özelliği olmayan bazı form denetimleriniz (Girişler, Seçimler vb.) Olduğunda görünür.

Bu örnekler hataya neden olur:

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

İki yol var, tek başına:

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

Veya form grubuna dahil etmek

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

Sonuncusu, onları başlatma formunda tanımlamak anlamına gelir.

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