ไม่สามารถผูกกับ 'formGroup' ได้เนื่องจากไม่ใช่คุณสมบัติที่รู้จักของ 'ฟอร์ม'

สถานการณ์:

กรุณาช่วย! ฉันกำลังพยายามทำสิ่งที่ควรเป็นรูปแบบที่ง่ายมากในแอป Angular2 ของฉัน แต่ไม่ว่ามันจะไม่ทำงาน

รุ่น ANGULAR:

เชิงมุม 2.0.0 Rc5

ข้อผิดพลาด:

Can't bind to 'formGroup' since it isn't a known property of 'form'

รหัส:

มุมมอง:

<form [formGroup]="newTaskForm" (submit)="createNewTask()">
   <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" required>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

ตัวควบคุม:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';

@Component({
    selector: 'task-add',
    templateUrl: 'app/task-add.component.html'

})
export class TaskAddComponent {

    newTaskForm: FormGroup;

    constructor(fb: FormBuilder) 
    {
        this.newTaskForm = fb.group({
            name: ["", Validators.required]
        });
    }

    createNewTask()
    {
        console.log(this.newTaskForm.value)
    } 
}

The ngModule:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { routing }        from './app.routing';
import { AppComponent }  from './app.component';
import { TaskService } from './task.service'

@NgModule({
    imports: [ 
        BrowserModule,
        routing,
        FormsModule
    ],
    declarations: [ AppComponent ],
    providers: [
        TaskService
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

คำถาม:

เหตุใดฉันจึงได้รับข้อผิดพลาดนั้น

ฉันพลาดอะไรไปรึเปล่า?

RC5 FIX

คุณจำเป็นต้องimport { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'อยู่ในการควบคุมของคุณและเพิ่มเข้าไปในdirectives @Componentที่จะแก้ไขปัญหา

หลังจากที่คุณแก้ไขคุณอาจจะได้รับข้อผิดพลาดอีกเนื่องจากคุณไม่ได้เพิ่มลงformControlName="name"ในแบบฟอร์มของคุณ

FIX RC6 / RC7 / Final FIX

เพื่อแก้ไขข้อผิดพลาดนี้คุณเพียงแค่ต้องนำเข้าReactiveFormsModuleจาก@angular/formsในโมดูลของคุณ นี่คือตัวอย่างของโมดูลพื้นฐานพร้อมReactiveFormsModuleการนำเข้า:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

เพื่ออธิบายเพิ่มเติมformGroupเป็นตัวเลือกสำหรับคำสั่งชื่อFormGroupDirectiveที่เป็นส่วนหนึ่งของReactiveFormsModuleจึงจำเป็นต้องนำเข้ามัน มันถูกใช้เพื่อผูกที่มีอยู่FormGroupกับองค์ประกอบ DOM คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้อย่างเป็นทางการหน้าเอกสารเชิงมุมของ

Angular 4 ประกอบกับโมดุลฟีเจอร์ (ถ้าคุณใช้อินสแตนซ์ร่วมกับโมดูล) คุณต้องส่งออกReactiveFormsModuleไปยังที่ทำงานด้วย

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

ตกลงหลังจากขุดพบบางฉันพบวิธีแก้ปัญหาสำหรับ "ไม่สามารถผูกกับ 'formGroup' เนื่องจากไม่ใช่คุณสมบัติที่รู้จักของ 'form'

สำหรับกรณีของฉันฉันใช้ไฟล์โมดูลหลายไฟล์ฉันได้เพิ่ม ReactiveFormsModule ใน app.module.ts

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';`

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

แต่สิ่งนี้ไม่ทำงานเมื่อฉันใช้คำสั่ง [formGroup] จากส่วนประกอบที่เพิ่มในโมดูลอื่นเช่นใช้ [formGroup] ใน author.component.ts ซึ่งสมัครเป็นสมาชิกในไฟล์ author.module.ts:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { AuthorComponent } from './author.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    AuthorComponent,
  ],
  providers: [...]
})

export class AuthorModule {}

ฉันคิดว่าถ้าฉันเพิ่ม ReactiveFormsModule ใน app.module.ts โดยค่าเริ่มต้น ReactiveFormsModule จะถูกสืบทอดโดยโมดูลลูกทั้งหมดเช่น author.module ในกรณีนี้ ... (ผิด!) ฉันต้องการนำเข้า ReactiveFormsModule ใน author.module.ts เพื่อให้คำสั่งทั้งหมดทำงานได้:

...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...

@NgModule({
  imports: [
    ...,
    FormsModule,    //added here too
    ReactiveFormsModule //added here too
  ],
  declarations: [...],
  providers: [...]
})

export class AuthorModule {}

ดังนั้นหากคุณใช้ submodules ตรวจสอบให้แน่ใจว่าได้นำเข้า ReactiveFormsModule ในแต่ละไฟล์ submodule หวังว่านี่จะช่วยทุกคน

ฉันพบข้อผิดพลาดนี้ระหว่างการทดสอบหน่วยของส่วนประกอบ (เฉพาะระหว่างการทดสอบภายในแอปพลิเคชันที่ใช้งานได้ตามปกติ) ทางออกคือการนำเข้าReactiveFormsModuleใน.spec.tsไฟล์:

// Import module
import { ReactiveFormsModule } from '@angular/forms';

describe('MyComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            imports: [ReactiveFormsModule],  // Also add it to 'imports' array
        })
        .compileComponents();
    }));
});

คำตอบที่แนะนำไม่สามารถใช้ได้กับฉันด้วย Angular 4 แต่ฉันต้องใช้วิธีอื่นในการผูกแอตทริบิวต์กับattrคำนำหน้า:

<element [attr.attribute-to-bind]="someValue">

หากคุณต้องนำเข้าสองโมดูลแล้วเพิ่มเช่นนี้ด้านล่าง

import {ReactiveFormsModule,FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponentComponent,
    BlogComponentComponent,
    ContactComponentComponent,
    HeaderComponentComponent,
    FooterComponentComponent,
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

เก็บไว้ในใจว่าถ้าคุณได้กำหนด "คุณลักษณะ Modules" AppModuleคุณจะต้องนำเข้าในลักษณะโมดูลแม้ว่าคุณจะนำเข้าอยู่แล้ว จากเอกสารเชิงมุม:

โมดูลไม่สืบทอดการเข้าถึงส่วนประกอบคำสั่งหรือไพพ์ที่ประกาศไว้ในโมดูลอื่น สิ่งที่ AppModule นำเข้านั้นไม่เกี่ยวข้องกับ ContactModule และในทางกลับกัน ก่อนที่ ContactComponent สามารถผูกกับ [(ngModel)] ContactModule ของมันจะต้องนำเข้า FormsModule

https://angular.io/docs/ts/latest/guide/ngmodule.html

ข้อผิดพลาดบอกว่า FormGroup ไม่ได้รับการยอมรับในโมดูลนี้ ดังนั้นคุณต้องนำเข้าโมดูล (ด้านล่าง) เหล่านี้ในทุกโมดูลที่ใช้FormGroup

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

จากนั้นเพิ่ม FormsModule และ ReactiveFormsModule ในอาร์เรย์การนำเข้าของโมดูลของคุณ

imports: [
  FormsModule,
  ReactiveFormsModule
],

คุณอาจจะคิดว่าฉันได้เพิ่มไปแล้วในAppModuleและมันควรจะได้รับมาจากมัน? แต่มันไม่ใช่ เนื่องจากโมดูลเหล่านี้กำลังส่งออกคำสั่งที่จำเป็นซึ่งมีเฉพาะในการนำเข้าโมดูลเท่านั้น อ่านรายละเอียดเพิ่มเติมได้ที่นี่ ... https://angular.io/guide/sharing-ngmodules

ปัจจัยอื่น ๆ สำหรับข้อผิดพลาดเหล่านี้อาจเป็นข้อผิดพลาดการสะกดเช่นด้านล่าง ...

[FormGroup] = "form" Capital Fแทน small f

[formsGroup] = "form" Extra sหลังแบบฟอร์ม

ฉันมีปัญหาเดียวกันกับ Angular 7 เพียงนำเข้าสิ่งต่อไปนี้ในไฟล์ app.module.ts ของคุณ

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

จากนั้นเพิ่ม FormsModule และ ReactiveFormsModule ในอาร์เรย์การนำเข้าของคุณ

imports: [
  FormsModule,
  ReactiveFormsModule
],

ปัญหานี้เกิดขึ้นเนื่องจากการขาดการนำเข้า FormsModule, ReactiveFormsModule. ฉันยังมาพร้อมกับปัญหาเดียวกัน กรณีของฉันแตกต่าง เนื่องจากฉันทำงานกับโมดูลดังนั้นฉันจึงพลาดการอิมพอร์ตในโมดูลพาเรนต์ของฉันแม้ว่าฉันได้อิมพอร์ตมันไปยังโมดูลย่อยมันไม่ทำงาน

จากนั้นฉันก็นำเข้าสู่โมดูลแม่ของฉันดังต่อไปนี้และใช้งานได้!

import { ReactiveFormsModule,FormsModule  } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';

         @NgModule({
          imports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule,
    ],
      declarations: [MyComponent]
    })

สำหรับคนที่เดินเล่นหัวข้อเหล่านี้เกี่ยวกับข้อผิดพลาดนี้ ในกรณีของฉันฉันมีโมดูลที่ใช้ร่วมกันซึ่งฉันส่งออก FormsModule และ ReactiveFormsModule เท่านั้นและลืมที่จะนำเข้า สิ่งนี้ทำให้เกิดข้อผิดพลาดแปลก ๆ ที่กลุ่มฟอร์มไม่ทำงานในส่วนประกอบย่อย หวังว่านี่จะช่วยให้คนเกาหัว

ฉันเจอข้อผิดพลาดนี้เมื่อพยายามทำการทดสอบ e2e และมันทำให้ฉันบ้าที่ไม่มีคำตอบสำหรับเรื่องนี้

หากคุณทำการทดสอบหาไฟล์ * .specs.tsและเพิ่ม:

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

หมายเหตุเล็กน้อย: ระวังตัวตักและย่อให้เล็กที่สุด (Rails env.):

หลังจากเห็นข้อผิดพลาดนี้และลองใช้วิธีแก้ปัญหาทั้งหมดที่นั่นฉันรู้ว่ามีบางอย่างผิดปกติกับตัวโหลด html ของฉัน

ฉันได้ตั้งค่าสภาพแวดล้อม Rails ของฉันให้นำเข้าเส้นทาง HTML สำหรับส่วนประกอบของฉันด้วยตัวโหลดนี้ ( config/loaders/html.js.):

module.exports = {
  test: /\.html$/,
  use: [ {
    loader: 'html-loader?exportAsEs6Default',
    options: {
      minimize: true
    }
  }]
}

หลังจากความพยายามหลายชั่วโมงและนับไม่ถ้วนของการนำเข้า ReactiveFormsModule ผมเห็นว่าฉันเป็นตัวอักษรขนาดเล็กformGroupformgroup

สิ่งนี้ทำให้ฉันโหลดและความจริงที่ว่ามันลดระดับ HTML ของฉันให้เหลือน้อยที่สุด

หลังจากเปลี่ยนตัวเลือกทุกอย่างทำงานได้ตามที่ควรและฉันสามารถกลับไปร้องไห้อีกครั้ง

ฉันรู้ว่านี่ไม่ใช่คำตอบสำหรับคำถาม แต่สำหรับผู้เข้าชม Rails ในอนาคต (และอื่น ๆ ที่มีตัวตักแบบกำหนดเอง) ฉันคิดว่านี่อาจเป็นประโยชน์

การใช้และนำเข้าREACTIVE_FORM_DIRECTIVES :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

หากคุณมีปัญหานี้เมื่อคุณพัฒนาส่วนประกอบดังนั้นคุณควรเพิ่มสองโมดูลนี้ในโมดูลที่ใกล้เคียงที่สุดของคุณ:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   // other modules
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

และถ้าคุณกำลังพัฒนาการทดสอบส่วนประกอบของคุณดังนั้นคุณควรเพิ่มโมดูลนี้ลงในไฟล์ทดสอบของคุณเช่นนี้:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactusComponent } from './contactus.component';
import { ReactiveFormsModule } from '@angular/forms';

describe('ContactusComponent', () => {
  let component: ContactusComponent;
  let fixture: ComponentFixture<ContactusComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ContactusComponent],
      imports:[
        ReactiveFormsModule
      ]

    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ContactusComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

นำเข้าReactiveFormsModuleในโมดูลที่สอดคล้อง

วิธีแก้ปัญหาง่าย ๆ :

ขั้นตอนที่ 1: นำเข้า ReactiveFormModule

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

ขั้นตอนที่ 2: เพิ่ม "ReactiveFormsModule" เพื่อนำเข้าส่วน

imports: [

    ReactiveFormsModule
  ]

ขั้นตอนที่ 3: รีสตาร์ทแอพและเสร็จสิ้น

ตัวอย่าง:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import { EscalationManagementRoutingModule } from './escalation-management-routing.module';
import { EscalationManagementRouteWrapperComponent } from './escalation-management-route-wrapper.component';


@NgModule({
  declarations: [EscalationManagementRouteWrapperComponent],
  imports: [
    CommonModule,
    EscalationManagementRoutingModule,
    ReactiveFormsModule
  ]
})
export class EscalationManagementModule { }

นำเข้าและลงทะเบียน ReactiveFormsModule ใน app.module.ts ของคุณ

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

@NgModule({
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe

],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

ตรวจสอบให้แน่ใจว่าการสะกดของคุณถูกต้องทั้งในไฟล์. ts และ. html xxx.ts

  profileForm = new FormGroup({
  firstName: new FormControl(''),
 lastName: new FormControl('')
 });

xxx.html ไฟล์ -

  <form [formGroup]="profileForm"> 
  <label>
  First Name:
   <input type="text" formControlName = "firstName">
  </label>

  <label>
  Last Name:
   <input type="text" formControlName = "lastName">
   </label>
   </form>

ฉันตั้งใจเขียน [FormGroup] ติดตั้ง [formGroup] ตรวจสอบการสะกดของคุณอย่างถูกต้องใน. html มันจะไม่ทิ้งข้อผิดพลาดเวลารวบรวมหากมีสิ่งผิดปกติในไฟล์. html

หมายเหตุ : หากคุณกำลังทำงานภายในองค์ประกอบของโมดูลลูกคุณเพียงแค่ต้องนำเข้าReactiveFormsModuleในโมดูลลูกแทนที่จะเป็นโมดูลหลักของแอปหลัก

อย่าเป็นคนโง่อย่างฉัน ได้รับข้อผิดพลาดเดียวกันข้างต้นไม่มีตัวเลือกใดในชุดข้อความนี้ที่ใช้งานได้ จากนั้นฉันก็รู้ว่าฉันใช้อักษรตัวใหญ่ 'F' ใน FormGroup Doh!

แทน:

[FormGroup]="form"

ทำ:

[formGroup]="form"

ถ้านี่เป็นเพียงข้อผิดพลาด typescript แต่ทุกอย่างในแบบฟอร์มของคุณทำงานคุณอาจต้องเริ่มต้น IDE ของคุณ

ฉันมีปัญหาเดียวกันตรวจสอบให้แน่ใจว่าหากใช้submodules (ตัวอย่างเช่นคุณไม่เพียง แต่มี app.component.module.ts แต่คุณมีองค์ประกอบแยกต่างหากเช่น login.module.ts ซึ่งคุณรวมการนำเข้า ReactiveFormsModule ในการเข้าสู่ระบบนี้.module.tsนำเข้าเพื่อให้ใช้งานได้ฉันไม่ต้องนำเข้า ReactiveFormsModule ใน app.component.module ของฉันเพราะฉันใช้ submodules ทุกอย่าง

login.module.ts:

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

import { IonicModule } from '@ionic/angular';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

อาจช่วยบางคน:

เมื่อคุณมี formGroup ใน modal (รายการส่วนประกอบ) จากนั้นคุณจะต้องนำเข้า ReactiveFormsModule ด้วยเช่นกันในโมดูลที่โมเดอเรเตอร์นั้นสร้างอินสแตนซ์

Can't bind to 'formGroup' since it isn't a known property of 'form'

หมายความว่าคุณพยายามผูกคุณสมบัติโดยใช้ angular ( [prop]) แต่ไม่สามารถหาสิ่งที่เขารู้ได้สำหรับองค์ประกอบนั้น (ในกรณีนี้form)

สิ่งนี้สามารถเกิดขึ้นได้โดยไม่ใช้โมดูลที่ถูกต้อง (ขาดการนำเข้าที่ใดที่หนึ่ง) และบางครั้งก็ทำให้พิมพ์ผิดเช่น:

[formsGroup]ด้วยsหลังจากform

วิธีการแก้ปัญหาของฉันบอบบางและฉันไม่เห็นมันอยู่ในรายการแล้ว

ฉันกำลังใช้แบบฟอร์มที่ตอบโต้ในส่วนประกอบโต้ตอบวัสดุที่ไม่ได้ประกาศapp.module.tsไว้ องค์ประกอบหลักที่มีการประกาศในapp.module.tsและจะเปิดองค์ประกอบโต้ตอบ app.module.tsแต่องค์ประกอบโต้ตอบไม่ได้ประกาศอย่างชัดเจนใน

ฉันไม่มีปัญหาใด ๆ ในการใช้องค์ประกอบการโต้ตอบตามปกติยกเว้นว่าแบบฟอร์มโยนข้อผิดพลาดนี้เมื่อใดก็ตามที่ฉันเปิดกล่องโต้ตอบ

Can't bind to 'formGroup' since it isn't a known property of 'form'.

ประการแรกก็ไม่ได้เกี่ยวข้องกับรุ่นเชิงมุม> 2 เพียงนำเข้าสิ่งต่อไปนี้ในไฟล์ app.module.ts ของคุณเพื่อแก้ไขปัญหา

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

จากนั้นเพิ่ม FormsModule และ ReactiveFormsModule ในอาร์เรย์การนำเข้าของคุณ

imports: [
  FormsModule,
  ReactiveFormsModule
],

บันทึก : คุณสามารถนำเข้าReactiveFormsModuleโมดูลที่ต้องการแทนได้เช่นกันapp.module.ts

เมื่อฉันเพิ่มโมดูลของฉันAppModuleทุกอย่างเริ่มทำงานได้ดี