ข้อผิดพลาด 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".

ดังนั้นเทมเพลตผลลัพธ์ควรเป็น ( ===>s ที่เปลี่ยนแปลง):

<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คำสั่ง นี้"ได้รับการคัดค้านใน v6 เชิงมุมและจะถูกลบออกใน 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ในกรณีของ Reactive approach หรือคุณสามารถนำเข้าทั้งสองอย่างซึ่งก็ใช้ได้เช่นกัน

หาก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">