Angular2 Error: Tidak ada perintah dengan "exportAs" disetel ke "ngForm"

Saya menggunakan RC4 dan saya mendapatkan kesalahan Tidak ada perintah dengan "exportAs" disetel ke "ngForm" karena template saya:

<div class="form-group">
        <label for="actionType">Action Type</label>
        <select
            ngControl="actionType" 
      ===>  #actionType="ngForm" 
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

boot.ts:

import {disableDeprecatedForms, provideForms} from '@angular/forms'; 

 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HTTP_PROVIDERS, Http} from '@angular/http';
 import {provideRouter} from '@angular/router';

import {APP_ROUTER_PROVIDER} from './routes';

import {AppComponent} from './app.component';

bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), APP_ROUTER_PROVIDER, HTTP_PROVIDERS]);

/// jadi inilah DropdownList saya:

<fieldset ngControlGroup="linkedProcess" >
                     <div ngControlGroup="Process" >
                         <label>Linked Process</label>
                          <div class="form-group">       
        <select 
            ngModel
            name="label" 
            #label="ngModel" 
            id="label" 
            class="form-control" required
            (change)="reloadProcesse(list.value)" 
            #list>
            <option value=""></option>
            <!--<option value=`{{ActionFormComponent.getFromString('GET'')}}`></option>-->                 
            <option *ngFor="let processus of linkedProcess?.processList?.list; let i = index" 
            value="{{ processus[i].Process.label}}">
                {{processus.Process.label}}
            </option>
        </select> 
        </div>
     </div>

// komponen saya ts:

saya mewakilinya dalam bentuk lama seperti ini:

 categoryControlGroups:ControlGroup[] = [];
     categories:ControlArray = new ControlArray(this.categoryControlGroups);

dan sekarang saya melakukan ini:

categoryControlGroups:FormGroup[] = [];
     categories:FormArray = new FormArray(this.categoryControlGroups);

Anda pikir itu penyebab prob ??

Sejak 2.0.0.rc6 :

formulir : tidak digunakan lagi provideForms()dan disableDeprecatedForms()fungsi telah dihapus. Harap impor FormsModuleatau ReactiveFormsModuledari @angular/formssebagai gantinya.

Pendeknya:

• Jika Anda menggunakan formulir berbasis template , tambahkanFormsModule ke file @NgModule.
• Jika Anda menggunakan formulir berdasarkan model, tambahkanReactiveFormsModule ke file @NgModule.

Jadi, tambahkan ke Andaapp.module.ts atau yang setara:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // <== add the imports!
 
import { AppComponent }  from './app.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,                               // <========== Add this line!
    ReactiveFormsModule                        // <========== Add this line!
  ],
  declarations: [
    AppComponent
    // other components of yours
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Gagal memiliki salah satu modul ini dapat menyebabkan kesalahan, termasuk yang Anda hadapi:

Tidak dapat mengikat ke 'ngModel' karena ini bukan properti 'input' yang diketahui.

Tidak dapat mengikat ke 'formGroup' karena ini bukan properti yang dikenal dari 'form'

Tidak ada perintah dengan "exportAs" disetel ke "ngForm"

Jika Anda ragu-ragu, Anda dapat menyediakan baik itu FormsModuledan ReactiveFormsModulebersama-sama, tetapi mereka sepenuhnya fungsional secara terpisah. Saat Anda menyediakan salah satu modul ini, direktif formulir default dan penyedia dari modul itu akan tersedia untuk Anda di seluruh aplikasi.

Formulir Lama menggunakan ngControl?

Jika Anda memiliki modul-modul itu di tangan Anda @NgModule, mungkin Anda menggunakan arahan lama, seperti ngControl, yang menjadi masalah, karena tidak ada ngControldi formulir baru. Itu diganti lebih atau kurang * oleh ngModel.

Misalnya, padanannya <input ngControl="actionType">adalah <input ngModel name="actionType">, jadi ubah itu di template Anda.

Demikian pula, ekspor dalam kontrol tidak ngFormlagi, sekarang ngModel. Jadi, dalam kasus Anda, ganti #actionType="ngForm"dengan #actionType="ngModel".

Jadi template yang dihasilkan harus ( ===>di mana diubah):

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
  ===>  ngModel
  ===>  name="actionType" 
  ===>  #actionType="ngModel" 
        id="actionType" 
        class="form-control" 
        required>
        <option value=""></option>
        <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
            {{ actionType.label }}
        </option>
    </select> 
</div>

* Lebih atau kurang karena tidak semua fungsionalitas ngControldipindahkan ke ngModel. Beberapa baru saja dihapus atau berbeda sekarang. Contohnya adalah nameatribut, kasus yang Anda alami saat ini.

Saya menghadapi masalah yang sama. Saya telah melewatkan tag impor modul formulir di app.module.ts

import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [BrowserModule,
        FormsModule
    ],

Saya memiliki masalah yang sama yang diselesaikan dengan menambahkan FormsModule ke .spec.ts:

import { FormsModule } from '@angular/forms';

lalu menambahkan impor ke beforeEach:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ FormsModule ],
    declarations: [ YourComponent ]
  })
.compileComponents();
}));

Jika Anda mendapatkan ini sebagai gantinya:

Kesalahan: Kesalahan penguraian template:

Tidak ada perintah dengan "exportAs" disetel ke " ngModel "

Yang dilaporkan sebagai bug di github , maka kemungkinan itu bukan bug karena Anda mungkin:

1. memiliki kesalahan sintaks (misalnya tanda kurung ekstra :) [(ngModel)]]=, OR
2. menjadi pencampuran direktif bentuk Reaktif , seperti formControlName, dengan ngModeldirektif . Ini "tidak digunakan lagi di Angular v6 dan akan dihapus di Angular v7" , karena ini menggabungkan kedua strategi bentuk, menjadikannya:

• Sepertinya ngModeldirektif sebenarnya sedang digunakan, tetapi sebenarnya itu adalah properti input / output yang dinamai ngModelpada direktif bentuk reaktif yang hanya mendekati (beberapa) perilakunya. Secara khusus, ini memungkinkan mendapatkan / menetapkan nilai dan mencegat peristiwa nilai. Namun, beberapa ngModelfitur lain - seperti menunda pembaruan dengan ngModelOpsi atau mengekspor perintah - tidak berfungsi (...)

• pola ini menggabungkan strategi formulir yang didorong template dan reaktif, yang biasanya tidak kami rekomendasikan karena tidak memanfaatkan manfaat penuh dari salah satu strategi . (...)

• Untuk memperbarui kode Anda sebelum v7, Anda akan ingin memutuskan apakah akan tetap menggunakan direktif formulir reaktif (dan mendapatkan / menetapkan nilai menggunakan pola formulir reaktif) atau beralih ke direktif berbasis template .

Ketika Anda memiliki masukan seperti ini:

<input formControlName="first" [(ngModel)]="value">

Ini akan menunjukkan peringatan tentang strategi bentuk campuran di konsol browser:

Sepertinya Anda menggunakan ngModeldi bidang formulir yang sama dengan formControlName.

Namun, jika Anda menambahkan ngModelsebagai nilai dalam variabel referensi, contoh:

<input formControlName="first" #firstIn="ngModel" [(ngModel)]="value">

Kesalahan di atas kemudian dipicu dan tidak ada peringatan tentang pencampuran strategi yang ditampilkan.

Dalam kasus saya, saya harus menambahkan FormsModuledan ReactiveFormsModuleke shared.module.tsjuga:

(terima kasih kepada @Undrium untuk contoh kodenya ):

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { }

Saya mengalami masalah ini dan saya menyadari bahwa saya tidak mengikat komponen saya ke variabel.

Berubah

<input #myComponent="ngModel" />

untuk

<input #myComponent="ngModel" [(ngModel)]="myvar" />

Cara yang benar untuk menggunakan formulir sekarang di Angular2 adalah:

<form  (ngSubmit)="onSubmit()">

        <label>Username:</label>
        <input type="text" class="form-control"   [(ngModel)]="user.username" name="username" #username="ngModel" required />

        <label>Contraseña:</label>
        <input type="password" class="form-control"  [(ngModel)]="user.password" name="password" #password="ngModel" required />


    <input type="submit" value="Entrar" class="btn btn-primary"/>

</form>

Cara lama tidak berfungsi lagi

Juga menyadari masalah ini muncul saat mencoba menggabungkan formulir reaktif dan pendekatan formulir Templat. Saya memiliki #name="ngModel"dan [formControl]="name"pada elemen yang sama. Menghapus salah satunya memperbaiki masalah. Juga bukan berarti jika Anda menggunakan #name=ngModelAnda juga harus memiliki properti seperti ini [(ngModel)]="name", jika tidak, Anda masih akan mendapatkan kesalahan. Ini berlaku untuk sudut 6, 7 dan 8 juga.

Pastikan Anda memiliki kedua ngModel and nameatribut yang Anda pilih. Juga Pilih adalah komponen formulir dan bukan seluruh formulir sehingga deklarasi referensi lokal yang lebih logis adalah: -

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
            ngControl="actionType" 
      ===>  #actionType="ngModel"
            ngModel    // You can go with 1 or 2 way binding as well
            name="actionType"
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

Satu hal lagi yang penting adalah pastikan Anda mengimpor baik FormsModuledalam kasus pendekatan didorong template atau ReactiveFormsModuledalam kasus pendekatan Reaktif. Atau Anda dapat mengimpor keduanya yang juga sangat bagus.

jika ngModuletidak berfungsi di input berarti coba ... hapus tanda kutip ganda di sekitarngModule

Suka

<input #form="ngModel" [(ngModel)]......></input>

bukan di atas

<input #form=ngModel [(ngModel)]......></input> try this

Saya mengalami masalah ini karena ada kesalahan ketik di template saya di dekat [(ngModel)]]. Braket ekstra. Contoh:

<input id="descr" name="descr" type="text" required class="form-control width-half"
      [ngClass]="{'is-invalid': descr.dirty && !descr.valid}" maxlength="16" [(ngModel)]]="category.descr"
      [disabled]="isDescrReadOnly" #descr="ngModel">