Angular2 Hatası: "exportAs" ın "ngForm" olarak ayarlandığı bir yönerge yoktur

RC4'teyim ve hatayı alıyorum Şablonum nedeniyle "exportAs" "ngForm" olarak ayarlanmış bir yönerge yok :

<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]);

/// işte Açılır Listem:

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

// benim bileşenim:

bunu eski biçimlerde temsil ediyordum:

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

ve şimdi bunu yapıyorum:

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

Sorunun nedeni bu mu sanıyorsun?

2.0.0.rc6'dan beri :

formlar : kullanımdan kaldırıldı provideForms()ve disableDeprecatedForms()işlevler kaldırıldı. İçe Lütfen FormsModuleya ReactiveFormsModuledan @angular/formsyerine.

Kısacası:

• Eğer kullanırsanız şablon odaklı formları eklemekFormsModule adresinden Müşteri @NgModule.
• Eğer kullanırsanız model güdümlü formlarını eklemekReactiveFormsModule adresinden Müşteri @NgModule.

Öyleyse, kendinizeapp.module.ts veya eşdeğerine ekleyin :

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

Bu modüllerden birine sahip olmamak, karşılaştığınız da dahil olmak üzere hatalara yol açabilir:

"İnput" un bilinen bir özelliği olmadığı için "ngModel" e bağlanamaz.

'Form'un bilinen bir özelliği olmadığı için' formGroup'a bağlanılamıyor

"ExportAs" "ngForm" olarak ayarlanmış bir yönerge yoktur.

Eğer şüpheniz varsa, her iki sağlayabilirFormsModule ve ReactiveFormsModulebuluşmanızı, ancak ayrı ayrı tam işlevseldir. Bu modüllerden birini sağladığınızda, bu modüldeki varsayılan form yönergeleri ve sağlayıcıları uygulama genelinde kullanımınıza sunulacaktır.

Eski Formlar ngControlmı kullanılıyor ?

Bu modüller elinizde varsa @NgModule, belki de eski yönergeleri kullanıyorsunuzdur, örneğin ngControlbu bir sorun, çünkü ngControlyeni formlarda yok. Aşağı yukarı * ile değiştirildi ngModel.

Örneğin, eşdeğeri <input ngControl="actionType">şudur <input ngModel name="actionType">, bu nedenle şablonunuzda bunu değiştirin.

Benzer şekilde, kontrollerdeki ihracat ngFormartık değil, şimdi öyle ngModel. Yani, senin durumunda, yerini #actionType="ngForm"ile #actionType="ngModel".

Bu nedenle, ortaya çıkan şablon şu olmalıdır ( ===>değiştirildiği yerlerde):

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

* Aşağı yukarı ngControl, öğesinin tüm işlevleri taşınmadığı için ngModel. Bazıları yeni kaldırıldı veya şimdi farklı. Bir örnek nameözniteliktir, tam da şu anda sahip olduğunuz durumdur.

Ben de aynı sorunla karşılaştım. App.module.ts içindeki formlar modülü içe aktarma etiketini kaçırdım

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

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

FormsModule'u .spec.ts dosyasına ekleyerek çözülen aynı sorunu yaşadım:

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

ve sonra içe aktarmayı her öğeye ekleme:

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

Bunun yerine bunu alıyorsanız:

Hata: Şablon ayrıştırma hataları:

Hiçbir yönerge "olarak ayarlanmış "exportAs" ile vardır ngModel "

Github'da bir hata olarak bildirilen , muhtemelen bir hata değildir, çünkü şunları yapabilirsiniz:

1. sözdizimi hatası var (örneğin, fazladan bir köşeli ayraç :) [(ngModel)]]=, VEYA
2. olmak Reaktif formları direktifleri karıştırma gibi formControlName, birlikte ngModeldirektifi . Bu, "Angular v6'da kullanımdan kaldırılmıştır ve Angular v7'de kaldırılacaktır" , çünkü bu, her iki form stratejisini karıştırır ve bunu yapar:

• gerçek ngModelyönerge kullanılıyor gibi görünmektedir , ancak aslında bu ngModel, davranışına (bir kısmına) yaklaşan, reaktif form yönergesinde adlandırılan bir girdi / çıktı özelliğidir . Özellikle, değerin alınmasına / ayarlanmasına ve değer olaylarının yakalanmasına izin verir. Ancak, diğer bazı ngModelözellikler - güncellemeleri ngModelSeçenekler ile ertelemek veya yönergeyi dışa aktarmak gibi - çalışmıyor (...)

• bu kalıp, şablona dayalı ve reaktif form stratejilerini karıştırır; bu stratejileri genellikle önermiyoruz, çünkü her iki stratejinin tüm avantajlarından yararlanmıyor . (...)

• Kodunuzu v7'den önce güncellemek için , reaktif form yönergelerine bağlı kalıp kalmayacağınıza (ve reaktif form kalıplarını kullanarak değerleri alıp / ayarlayıp) veya şablona dayalı yönergelere geçip geçmeyeceğinize karar vermelisiniz .

Böyle bir girişiniz olduğunda:

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

Tarayıcının konsolunda karma form stratejileri hakkında bir uyarı gösterecektir:

Kullandığınız gibi görünüyor ngModelaynı şekilde sahada formControlName.

Ancak, ngModelbir referans değişkenine değer olarak eklerseniz , örnek:

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

Daha sonra yukarıdaki hata tetiklenir ve strateji karıştırma hakkında hiçbir uyarı gösterilmez.

Benim durumumda ben eklemek zorunda FormsModuleve ReactiveFormsModuleiçin shared.module.tsçok:

( kod örneği için @Undrium'a teşekkürler ):

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

Bu problemi yaşadım ve bileşenimi bir değişkene bağlamadığımı fark ettim.

değişmiş

<input #myComponent="ngModel" />

için

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

Şimdi Angular2'de formları kullanmanın doğru yolu şudur:

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

Eski yol artık çalışmıyor

Ayrıca reaktif form ve şablon form yaklaşımlarını birleştirmeye çalışırken bu sorunun ortaya çıktığını fark etti. Ben #name="ngModel"ve [formControl]="name"aynı eleman üzerinde. İkisinden birinin kaldırılması sorunu çözdü. Ayrıca, kullanırsanız #name=ngModel, bunun gibi bir özelliğe de sahip olmanız gerektiğini unutmayın [(ngModel)]="name", aksi takdirde, yine de hataları alırsınız. Bu açısal 6, 7 ve 8 için de geçerlidir.

Seçiminizde her iki ngModel and nameözelliğin de bulunduğunu kontrol edin. Ayrıca Select bir form bileşenidir ve formun tamamı değildir, bu nedenle yerel referansın daha mantıklı bildirimi şu şekilde olacaktır: -

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

Bir diğer Önemli şey, FormsModuleşablona dayalı yaklaşım veya ReactiveFormsModuleReaktif yaklaşım durumunda içe aktardığınızdan emin olmaktır . Ya da her ikisini de içe aktarabilirsiniz ki bu da tamamen iyidir.

eğer ngModulegirdi aracı çalışmıyor ... çift tırnak kaldırmak deneyinngModule

sevmek

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

yukarı yerine

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

Bu sorunu yaşadım çünkü şablonumda [(ngModel)]] yakınında bir yazım hatası vardı. Ekstra dirsek. Misal:

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