ngModel tidak dapat digunakan untuk mendaftarkan kontrol formulir dengan direktif formGroup induk

Setelah memutakhirkan ke RC5 kami mulai mendapatkan kesalahan ini:

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>

Sepertinya di RC5 keduanya tidak lagi dapat digunakan bersama, tetapi saya tidak dapat menemukan solusi alternatif.

Berikut adalah komponen yang menghasilkan pengecualian:

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

Jawabannya tepat di pesan kesalahan, Anda perlu menunjukkan bahwa itu berdiri sendiri dan oleh karena itu tidak bertentangan dengan kontrol formulir:

[ngModelOptions]="{standalone: true}"

Memperluas jawaban @Avenir Çokaj

Menjadi seorang pemula bahkan saya tidak memahami pesan kesalahan dengan jelas pada awalnya.

Pesan kesalahan menunjukkan bahwa di formGroup Anda memiliki elemen yang tidak diperhitungkan di formControl Anda. (Sengaja / Tidak Sengaja)

Jika Anda bermaksud untuk tidak memvalidasi bidang ini tetapi masih ingin menggunakan ngModel pada elemen input ini, harap tambahkan bendera untuk menunjukkan bahwa itu adalah komponen mandiri tanpa perlu validasi seperti yang disebutkan oleh @Avenir di atas.

Oke, akhirnya berhasil: lihat https://github.com/angular/angular/pull/10314#issuecomment-242218563

Singkatnya, Anda tidak dapat lagi menggunakan nameatribut dalam a formGroup, dan harus menggunakan formControlNamesebagai gantinya

ketika Anda menulis formcontrolname Angular 2 tidak menerima. Anda harus menulis formControlName . ini tentang kata kedua huruf besar.

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

Jika error masih berlanjut coba set form control untuk semua field objek (myObject).

antara awal <form> </form>misalnya:<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Jika komponen memiliki lebih dari 1 formulir, daftarkan semua kontrol dan formulir

Saya perlu tahu mengapa ini terjadi di komponen tertentu dan bukan di komponen lain.

Masalahnya adalah saya memiliki 2 formulir dalam satu komponen dan formulir kedua belum ada [formGroup]dan belum terdaftar karena saya masih membuat formulir.

Saya melanjutkan dan menyelesaikan penulisan kedua formulir lengkap tanpa meninggalkan masukan yang tidak terdaftar yang menyelesaikan masalah.

Saya baru saja mendapatkan kesalahan ini karena saya tidak menyertakan semua kontrol formulir saya dalam atribut divwith formGroup.

Misalnya, ini akan memunculkan kesalahan

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

Ini bisa sangat mudah terlewatkan jika bentuknya sangat panjang.

Jika Anda ingin menggunakan [formGroup]with formControlName, Anda harus mengganti nameatribut dengan formControlNameformControlName.

Contoh:

Ini tidak berfungsi karena menggunakan atribut [formGroup]dan name.

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

Anda harus mengganti nameatribut dengan formControlNamedan itu akan berfungsi dengan baik seperti berikut:

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

Sepertinya Anda menggunakan ngModel di kolom formulir yang sama dengan formControlName. Dukungan untuk menggunakan properti input ngModel dan acara ngModelChange dengan arahan formulir reaktif tidak digunakan lagi di Angular v6 dan akan dihapus di Angular v7

Kesalahan ini muncul saat Anda memiliki beberapa kontrol formulir (seperti Input, Selects, dll) di tag grup formulir Anda tanpa properti formControlName.

Contoh-contoh tersebut menunjukkan kesalahan:

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

Ada dua cara, berdiri sendiri:

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

Atau memasukkannya ke dalam formgroup

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

Yang terakhir menyiratkan untuk mendefinisikannya dalam inisialisasi formGroup

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