Lỗi Angular2: Không có chỉ thị nào với “exportAs” được đặt thành “ngForm”

Tôi đang ở trên RC4 và tôi đang gặp lỗi Không có chỉ thị nào với "exportAs" được đặt thành "ngForm" vì mẫu của tôi:

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

/// đây là DropdownList của tôi:

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

// thành phần của tôi ts:

tôi đã đại diện cho nó ở các dạng cũ như thế này:

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

và bây giờ tôi đang làm điều này:

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

bạn nghĩ rằng đó là nguyên nhân của các thử nghiệm ??

Kể từ 2.0.0.rc6 :

biểu mẫu : không dùng nữa provideForms()và các disableDeprecatedForms()chức năng đã bị loại bỏ. Vui lòng nhập FormsModulehoặc ReactiveFormsModuletừ @angular/formsthay thế.

Nói ngắn gọn:

• Nếu bạn sử dụng biểu mẫu theo hướng mẫu , hãy thêmFormsModule vào của bạn @NgModule.
• Nếu bạn sử dụng biểu mẫu hướng mô hình, hãy thêmReactiveFormsModule vào của bạn @NgModule.

Vì vậy, hãy thêm vào của bạnapp.module.ts hoặc tương đương:

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

Không có một trong các mô-đun này có thể dẫn đến lỗi, bao gồm lỗi mà bạn gặp phải:

Không thể liên kết với 'ngModel' vì nó không phải là thuộc tính đã biết của 'input'.

Không thể liên kết với 'formGroup' vì nó không phải là thuộc tính đã biết của 'form'

Không có chỉ thị nào với "exportAs" được đặt thành "ngForm"

Nếu bạn không chắc chắn, bạn có thể cung cấp cả các FormsModulevà ReactiveFormsModulevới nhau, nhưng họ hoàn toàn chức năng riêng biệt. Khi bạn cung cấp một trong các mô-đun này, các chỉ thị và trình cung cấp biểu mẫu mặc định từ mô-đun đó sẽ có sẵn cho bạn trên toàn ứng dụng.

Sử dụng Form cũ ngControl?

Nếu bạn có các mô-đun đó @NgModule, có lẽ bạn đang sử dụng các chỉ thị cũ, chẳng hạn như ngControl, đây là một vấn đề, vì không có ngControltrong các biểu mẫu mới. Nó đã được thay thế nhiều hơn hoặc ít hơn * bởi ngModel.

Ví dụ: tương đương với <input ngControl="actionType">là <input ngModel name="actionType">, vì vậy hãy thay đổi điều đó trong mẫu của bạn.

Tương tự, việc xuất trong các điều khiển không ngFormcòn nữa, mà là ngay bây giờ ngModel. Vì vậy, trong trường hợp của bạn, hãy thay thế #actionType="ngForm"bằng #actionType="ngModel".

Vì vậy, mẫu kết quả phải là (những ===>nơi đã thay đổi):

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

* Nhiều hơn hoặc ít hơn vì không phải tất cả chức năng của ngControlđều được chuyển đến ngModel. Một số vừa bị xóa hoặc bây giờ đã khác. Một ví dụ là namethuộc tính, trường hợp bạn đang gặp phải ngay bây giờ.

Tôi phải đối mặt với cùng một vấn đề. Tôi đã bỏ lỡ thẻ nhập mô-đun biểu mẫu trong app.module.ts

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

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

Tôi gặp vấn đề tương tự đã được giải quyết bằng cách thêm FormsModule vào .spec.ts:

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

và sau đó thêm nhập vào beforeEach:

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

Nếu bạn nhận được điều này thay thế:

Lỗi: Lỗi phân tích cú pháp mẫu:

Không có chỉ thị nào với "exportAs" được đặt thành " ngModel "

Đã được báo cáo là một lỗi trong github , thì có khả năng đó không phải là một lỗi vì bạn có thể:

1. có lỗi cú pháp (ví dụ: dấu ngoặc nhọn phụ [(ngModel)]]=:), HOẶC
2. được trộn hình thức chỉ thị phản ứng , chẳng hạn như formControlName, với ngModelchỉ thị . Điều này "đã không được chấp nhận trong Angular v6 và sẽ bị loại bỏ trong Angular v7" , vì điều này kết hợp cả hai chiến lược biểu mẫu, làm cho nó:

• có vẻ như ngModelchỉ thị thực sự đang được sử dụng, nhưng thực tế đó là một thuộc tính đầu vào / đầu ra có tên ngModeltrên chỉ thị biểu mẫu phản ứng chỉ đơn giản là gần đúng (một số) hành vi của nó. Cụ thể, nó cho phép lấy / đặt giá trị và chặn các sự kiện giá trị. Tuy nhiên, một số ngModeltính năng khác - như trì hoãn cập nhật với ngModelTùy chọn hoặc xuất chỉ thị - chỉ đơn giản là không hoạt động (...)

• mô hình này kết hợp các chiến lược biểu mẫu phản ứng và hướng theo khuôn mẫu, mà chúng tôi thường không đề xuất vì nó không tận dụng được lợi ích đầy đủ của một trong hai chiến lược . (...)

• Để cập nhật mã của bạn trước phiên bản 7, bạn sẽ muốn quyết định xem có nên sử dụng chỉ thị biểu mẫu phản ứng (và lấy / đặt giá trị bằng cách sử dụng các mẫu biểu mẫu phản ứng) hay chuyển sang chỉ thị hướng mẫu .

Khi bạn có một đầu vào như thế này:

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

Nó sẽ hiển thị cảnh báo về các chiến lược dạng hỗn hợp trong bảng điều khiển của trình duyệt:

Có vẻ như bạn đang sử dụng ngModeltrên cùng một trường biểu mẫu với formControlName.

Tuy nhiên, nếu bạn thêm ngModeldưới dạng giá trị trong biến tham chiếu, ví dụ:

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

Sau đó, lỗi trên được kích hoạt và không có cảnh báo nào về kết hợp chiến lược được hiển thị.

Trong trường hợp của tôi, tôi phải thêm FormsModulevà ReactiveFormsModulecả shared.module.ts:

(cảm ơn @Undrium về ví dụ mã ):

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

Tôi gặp sự cố này và tôi nhận ra rằng tôi đã không ràng buộc thành phần của mình với một biến.

Đã thay đổi

<input #myComponent="ngModel" />

đến

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

Cách sử dụng biểu mẫu chính xác hiện nay trong Angular2 là:

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

Cách cũ không hoạt động nữa

Cũng nhận ra rằng vấn đề này xuất hiện khi cố gắng kết hợp các phương pháp tiếp cận biểu mẫu phản ứng và biểu mẫu mẫu. Tôi đã có #name="ngModel"và [formControl]="name"trên cùng một yếu tố. Xóa một trong hai đã khắc phục sự cố. Cũng không phải là nếu bạn sử dụng #name=ngModelbạn cũng nên có một thuộc tính như thế này [(ngModel)]="name", nếu không, Bạn sẽ vẫn nhận được lỗi. Điều này cũng áp dụng cho góc 6, 7 và 8.

Kiểm tra để đảm bảo rằng bạn có cả hai ngModel and namethuộc tính trong lựa chọn của mình. Ngoài ra, Chọn là một thành phần biểu mẫu chứ không phải toàn bộ biểu mẫu nên khai báo hợp lý hơn về tham chiếu cục bộ sẽ là: -

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

Một điều quan trọng nữa là đảm bảo rằng bạn nhập FormsModuletrong trường hợp phương pháp tiếp cận theo hướng mẫu hoặc ReactiveFormsModuletrong trường hợp phương pháp tiếp cận Phản ứng. Hoặc bạn có thể nhập cả hai cũng hoàn toàn ổn.

nếu ngModulekhông hoạt động trong đầu vào có nghĩa là hãy thử ... xóa dấu ngoặc kép xung quanhngModule

giống

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

thay vì ở trên

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

Tôi gặp sự cố này vì tôi có lỗi đánh máy trong mẫu của mình gần [(ngModel)]]. Dấu ngoặc phụ. Thí dụ:

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