Помилка Angular2: Немає директиви з "exportAs", встановленою на "ngForm"

я на RC4, і я отримую помилку. Немає директиви з "exportAs", встановленою на "ngForm" через мій шаблон:

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

/// ось мій DropdownList:

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

// мій компонент ts:

я представляв це в старих формах, як це:

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

і зараз я роблю це:

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

ви думаєте, що це причина проблеми ??

З 2.0.0.rc6 :

форми : застарілі provideForms()та disableDeprecatedForms()функції видалено. Будь-ласка, імпортуйте FormsModuleабо ReactiveFormsModuleзвідти @angular/formsзамість цього.

Коротко:

• Якщо ви використовуєте форми , керовані шаблонами , додайтеFormsModule до своїх @NgModule.
• Якщо ви використовуєте форми, керовані моделями, додайтеReactiveFormsModule до своїх @NgModule.

Отже, додайте до свогоapp.module.ts або аналогічного:

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

Якщо у вас немає одного з цих модулів, це може призвести до помилок, включаючи той, з яким ви стикаєтеся:

Неможливо прив’язати до 'ngModel', оскільки це не відома властивість 'input'.

Неможливо прив’язати до 'formGroup', оскільки це не відома властивість 'form'

Немає директиви з "exportAs", встановленою на "ngForm"

Якщо ви сумніваєтеся, ви можете забезпечити якFormsModule і в ReactiveFormsModuleтусовці, але вони повністю функціональні окремо. Коли ви надаєте один з цих модулів, директиви щодо форм за замовчуванням формулярів та постачальників із цього модуля будуть доступні вам у всьому додатку.

Використання старих форм ngControl?

Якщо у вас є ці модулі у вас @NgModule, можливо, ви використовуєте старі директиви, такі як ngControl, що є проблемою, оскільки немає ngControlв нових формах. Його замінили більш-менш * на ngModel.

Наприклад, еквівалент <input ngControl="actionType">є <input ngModel name="actionType">, тому змініть це у своєму шаблоні.

Так само експорт у контролі вже не ngFormє, зараз є ngModel. Тож у вашому випадку замініть #actionType="ngForm"на #actionType="ngModel".

Отже, отриманий шаблон повинен бути ( ===>-ою, де змінено):

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

* Більше чи менше, оскільки не всі функції функцій ngControlбуло переміщено до ngModel. Деякі просто вилучили або зараз відрізняються. Приклад - nameатрибут, той самий випадок, який ви маєте зараз.

Я зіткнувся з тим же питанням. Я пропустив тег імпорту модуля форм у app.module.ts

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

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

У мене була та сама проблема, яку було вирішено, додавши FormsModule до .spec.ts:

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

а потім додавати імпорт до beforeEach:

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

Якщо ви отримуєте це замість цього:

Помилка: помилки аналізу шаблону:

Немає директиви з "exportAs", встановленою на " ngModel "

Про яку повідомлялося про помилку в github , то, ймовірно, це не помилка, оскільки ви можете:

1. мати синтаксичну помилку (наприклад, додаткова дужка:) [(ngModel)]]=, АБО
2. бути змішуванням директив реактивних форм , таких як formControlName, з ngModelдирективою . Це "застаріло в Angular v6 і буде видалено в Angular v7" , оскільки це змішує обидві стратегії форми, завдяки чому:

• здається, використовується фактична ngModelдиректива, але насправді це властивість введення / виводу, названа ngModelв директиві реактивної форми, що просто наближає (деяку частину) її поведінки. Зокрема, це дозволяє отримувати / встановлювати значення та перехоплювати ціннісні події. Однак деякі ngModelінші функції, такі як затримка оновлень з ngModelпараметрами або експорт директиви, просто не працюють (...)

• Цей шаблон змішує стратегії, керовані шаблонами та реактивні форми, які ми, як правило, не рекомендуємо, оскільки він не використовує всі переваги будь-якої стратегії . (...)

• Щоб оновити код перед v7, вам потрібно вирішити, чи дотримуватися директив реактивної форми (і отримувати / встановлювати значення за допомогою шаблонів реактивних форм) або переходити до директив, керованих шаблонами .

Якщо у вас є такий вхід:

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

На консолі браузера з’явиться попередження про стратегії змішаної форми:

Схоже, ви використовуєте ngModelте саме поле форми, що і formControlName.

Однак, якщо ви додаєте значення ngModelяк значення в довідкову змінну, наприклад:

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

Потім запускається помилка, і не відображається попередження про змішування стратегії.

У моєму випадку мені довелося додати FormsModuleі ReactiveFormsModuleте саме shared.module.ts:

(спасибі @Undrium за приклад коду ):

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

У мене була ця проблема, і я зрозумів, що не прив’язував свій компонент до змінної.

Змінено

<input #myComponent="ngModel" />

до

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

Правильний спосіб використання форм зараз у Angular2:

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

Старий спосіб більше не працює

Також зрозуміла, що ця проблема виникає при спробі поєднання підходів до реактивної форми та шаблону форм. У мене був #name="ngModel"і [formControl]="name"на одному елементі. Видалення будь-якого вирішило проблему. Також не те, що якщо ви користуєтесь, #name=ngModelви також повинні мати таке властивість, як це [(ngModel)]="name", інакше ви все одно отримаєте помилки. Це стосується також кутових 6, 7 та 8.

Перевірте, чи є у вас обидва ngModel and nameатрибути. Також Select - це компонент форми, а не вся форма, тому більш логічним оголошенням локальної довідки буде: -

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

Ще одна важлива річ - переконайтесь, що ви імпортуєте або FormsModuleу випадку підходу, керованого шаблоном, або ReactiveFormsModuleу випадку реактивного підходу. Або ви можете імпортувати обидва, що також абсолютно добре.

якщо ngModuleне працює введення засобів, спробуйте ... видаліть подвійні лапки навколоngModule

подібно до

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

замість вище

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

У мене була ця проблема, тому що в моєму шаблоні біля [(ngModel)]] була помилка друку. Додаткова дужка. Приклад:

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