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


93

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>

Apakah Anda mengimpor FormsModuledan ReactiveFormsModule?
Günter Zöchbauer

Tentu, keduanya
pengguna2363245

AFAIK, satu-satunya penjelasan yang ada adalah sebagai berikut: blog.angular-university.io/…
user2363245

Sumber perubahan yang ditemukan: github.com/angular/angular/pull/10314
user2363245

Jawaban:


178

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

[ngModelOptions]="{standalone: true}"

1
apa artinya standalone?
Jas

2
Artinya tidak tertangani oleh form model / data sehingga anda dapat melewatkan data dengan objek / model apapun yang anda inginkan seperti yang dulu ada di AngularJS 1
Avenir Çokaj

Saya hanya melihat masalah ini di pengaturan pengujian saya. Apa sebenarnya yang hilang? [ngModelOptions] = "{standalone: ​​true}" memperbaiki pengujian tetapi mengubah logika. ngModel diwarisi dari komponen induk, yang mendeklarasikan ngForm dalam kasus saya
aholbreich

2
Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
WasiF

28

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.


6
Bagaimana jika Anda ingin menggunakan if untuk validasi DAN menggunakannya dengan ngModel pada saat yang sama?
Paul

Dalam kasus saya, saya ketinggalan untuk mendeklarasikan formControl untuk elemen di dalam formGroup!
Sagar Khatri


8

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


5

import { FormControl, FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms';


    this.userInfoForm = new FormGroup({
      userInfoUserName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
      userInfoName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
      userInfoSurName: new FormControl({ value: '' }, Validators.compose([Validators.required]))
    });
<form [formGroup]="userInfoForm" class="form-horizontal">
            <div class="form-group">
                <label class="control-label"><i>*</i> User Name</label>
                    <input type="text" formControlName="userInfoUserName" class="form-control" [(ngModel)]="userInfo.userName">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Name</label>
                    <input type="text" formControlName="userInfoName" class="form-control" [(ngModel)]="userInfo.name">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Surname</label>
                    <input type="text" formControlName="userInfoSurName" class="form-control" [(ngModel)]="userInfo.surName">
            </div>
</form>


1

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.


1

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.


0

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>

solusi untuk ini juga bisa jika Anda menggunakan [formGroup] = "myGroup" dan referensi internal dengan [(ngModel)] properti yang nog di formGroup. coba tambahkan [ngModelOptions] = "{standalone: ​​true}" jadi Anda memberi tahu compiler Anda bahwa itu mungkin dikecualikan dan ini adalah properti yang berdiri sendiri
ProblemAnswerQue

0

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


0

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('')
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.