Không thể liên kết với 'formgroup' vì đây không phải là thuộc tính được biết đến của 'biểu mẫu'

TÌNH HUỐNG:

Xin vui lòng giúp đỡ! Tôi đang cố gắng tạo ra những gì nên là một hình thức rất đơn giản trong ứng dụng Angular2 của mình nhưng không có vấn đề gì nó không bao giờ hoạt động.

PHIÊN BẢN ANGULAR:

Góc 2.0.0 Rc5

LỖI:

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

MẬT MÃ:

Quan điểm:

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

Bộ điều khiển:

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

Các 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 { }

CÂU HỎI:

Tại sao tôi nhận được lỗi đó?

Tui bỏ lỡ điều gì vậy?

CỐ ĐỊNH RC5

Bạn cần phải import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'trong bộ điều khiển của bạn và thêm nó directivesvào @Component. Điều đó sẽ khắc phục vấn đề.

Sau khi bạn khắc phục điều đó, có thể bạn sẽ gặp một lỗi khác vì bạn đã không thêm formControlName="name"vào đầu vào của mình dưới dạng.

RC6 / RC7 / Bản phát hành cuối cùng CỐ ĐỊNH

Để khắc phục lỗi này, bạn chỉ cần nhập ReactiveFormsModuletừ @angular/formstrong mô-đun của mình. Đây là ví dụ về một mô-đun cơ bản với ReactiveFormsModulenhập khẩu:

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

Để giải thích thêm, formGrouplà một bộ chọn cho chỉ thị có tên FormGroupDirectivelà một phần của ReactiveFormsModule, do đó cần phải nhập nó. Nó được sử dụng để liên kết một FormGroupphần tử DOM hiện có . Bạn có thể đọc thêm về nó trên trang tài liệu chính thức của Angular .

Angular 4 kết hợp với các mô-đun tính năng (nếu bạn đang sử dụng mô-đun chia sẻ) yêu cầu bạn cũng phải xuất khẩu ReactiveFormsModuleđể làm việc.

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

Ok sau khi đào bới, tôi đã tìm thấy một giải pháp cho "Không thể liên kết với 'formgroup' vì nó không phải là một thuộc tính được biết đến của 'biểu mẫu'."

Trong trường hợp của tôi, tôi đã sử dụng nhiều tệp mô-đun, tôi đã thêm ReactiveFormsModule trong app.module.ts

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

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

Nhưng điều này không hoạt động khi tôi sử dụng một lệnh [formgroup] từ một thành phần được thêm vào trong một mô-đun khác, ví dụ: sử dụng [formgroup] trong Author.component.ts được đăng ký trong tệp 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 {}

Tôi nghĩ rằng nếu tôi đã thêm ReactiveFormsModule trong app.module.ts, theo mặc định ReactiveFormsModule sẽ được kế thừa bởi tất cả các mô đun con của nó như Author.module trong trường hợp này ... (sai!). Tôi cần nhập ReactiveFormsModule trong Author.module.ts để làm cho tất cả các lệnh hoạt động:

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

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

export class AuthorModule {}

Vì vậy, nếu bạn đang sử dụng các mô hình con, hãy đảm bảo nhập ReactiveFormsModule trong mỗi tệp mô hình con. Hy vọng điều này sẽ giúp bất cứ ai.

Tôi đã gặp lỗi này trong quá trình kiểm tra đơn vị của một thành phần (chỉ trong quá trình kiểm tra, trong ứng dụng, nó hoạt động bình thường). Giải pháp là để nhập khẩu ReactiveFormsModuletrong .spec.tsfile:

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

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

Câu trả lời được đề xuất không phù hợp với tôi với Angular 4. Thay vào đó tôi phải sử dụng một cách ràng buộc thuộc tính khác với attrtiền tố:

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

Nếu bạn phải nhập hai mô-đun thì thêm như thế dưới đây

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

Hãy nhớ rằng nếu bạn đã xác định "Mô-đun tính năng", bạn sẽ cần nhập vào Mô-đun tính năng, ngay cả khi bạn đã nhập vào AppModule. Từ tài liệu Angular:

Các mô-đun không kế thừa quyền truy cập vào các thành phần, chỉ thị hoặc đường ống được khai báo trong các mô-đun khác. Những gì AppModule nhập khẩu không liên quan đến ContactModule và ngược lại. Trước khi ContactComponent có thể liên kết với [(ngModel)], ContactModule của nó phải nhập FormsModule.

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

Lỗi nói rằng Formgroup không được nhận dạng trong mô-đun này. Vì vậy, bạn phải nhập các mô-đun (bên dưới) này vào mọi mô-đun sử dụng Formgroup

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

Sau đó thêm FormsModule và ReactiveFormsModule vào mảng nhập mô-đun của bạn .

imports: [
  FormsModule,
  ReactiveFormsModule
],

Bạn có thể nghĩ rằng tôi đã thêm nó trong AppModule và nó có nên kế thừa từ nó không? Nhưng nó không phải như vậy. bởi vì các mô-đun này đang xuất các chỉ thị cần thiết chỉ có sẵn trong việc nhập các mô-đun. Đọc thêm ở đây ... https://angular.io/guide/shaming-ngmodules .

Các yếu tố khác cho những lỗi này có thể là lỗi chính tả như dưới đây ...

[Formgroup] = "form" Vốn F thay vì f nhỏ

[Formsgroup] = "form" Thêm s sau biểu mẫu

Tôi gặp vấn đề tương tự với Angular 7. Chỉ cần nhập sau trong tệp app.module.ts của bạn.

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

Sau đó thêm FormsModule và ReactiveFormsModule vào mảng nhập của bạn.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Sự cố này xảy ra do nhập thiếu FormsModule, ReactiveFormsModule. Tôi cũng gặp vấn đề tương tự. Trường hợp của tôi là khác. vì tôi đang làm việc với các mô-đun. Vì vậy, tôi đã bỏ lỡ các lần nhập trên các mô đun mẹ mặc dù tôi đã nhập nó vào các mô đun con, nó không hoạt động.

Sau đó, tôi đã nhập nó vào các mô-đun cha mẹ của tôi như dưới đây, và nó đã hoạt động!

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

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

Đối với những người đi dạo các chủ đề về lỗi này. Trong trường hợp của tôi, tôi đã có một mô-đun chia sẻ, nơi tôi chỉ xuất FormsModule và ReactiveFormsModule và quên nhập nó. Điều này gây ra một lỗi lạ là các nhóm định dạng không hoạt động trong các thành phần phụ. Hy vọng điều này sẽ giúp mọi người gãi đầu.

Tôi đã gặp phải lỗi này khi thử làm e2e và điều đó khiến tôi phát điên vì không có câu trả lời nào cho việc này.

NẾU BẠN ĐANG KIỂM TRA, hãy tìm tệp * .specs.ts của bạn và thêm:

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

LƯU Ý LITTLE: Cẩn thận về bộ tải và thu nhỏ (Rails env.):

Sau khi thấy lỗi này và thử mọi giải pháp ngoài kia, tôi nhận ra có lỗi với trình tải html của mình.

Tôi đã thiết lập môi trường Rails của mình để nhập đường dẫn HTML cho các thành phần của mình thành công với trình tải này ( config/loaders/html.js.):

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

Sau vài giờ nỗ lực và vô số lần nhập ReactiveFormsModule tôi thấy rằng đó formGrouplà những chữ cái nhỏ : formgroup.

Điều này dẫn tôi đến trình tải và thực tế là nó đã giảm HTML của tôi xuống mức tối thiểu.

Sau khi thay đổi các tùy chọn, mọi thứ hoạt động như bình thường và tôi có thể quay lại khóc lần nữa.

Tôi biết rằng đây không phải là một câu trả lời cho câu hỏi, nhưng đối với khách truy cập Rails trong tương lai (và khác với trình tải tùy chỉnh) tôi nghĩ rằng điều này có thể hữu ích.

sử dụng và nhập 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 { }

Nếu bạn gặp vấn đề này khi phát triển một thành phần, do đó bạn nên thêm hai mô-đun này vào mô-đun gần nhất:

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

Và nếu bạn đang phát triển một thử nghiệm cho các thành phần của mình, vì vậy bạn nên thêm mô-đun này vào tệp thử nghiệm của mình như sau:

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();
  });
});

Nhập ReactiveFormsModule trong mô-đun tương ứng

Giải pháp đơn giản:

Bước 1: nhập ReactiveFormModule

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

Bước 2: thêm "ReactiveFormsModule" vào phần nhập

imports: [

    ReactiveFormsModule
  ]

Bước 3: khởi động lại ứng dụng và hoàn thành

Thí dụ :

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

Nhập và đăng ký ReactiveFormsModule trong app.module.ts của bạn.

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

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

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

Đảm bảo chính tả của bạn là chính xác trong cả tệp .ts và .html. xxx.ts

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

xxx.html tập tin-

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

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

Tôi đã nhầm lẫn đã viết [Formgroup] bắt nguồn từ [formgroup]. Kiểm tra chính tả của bạn trong .html. Nó không ném lỗi thời gian biên dịch Nếu có gì sai trong tệp .html.

Lưu ý : nếu bạn đang làm việc bên trong thành phần của mô đun con, thì bạn chỉ cần nhập ReactiveFormsModule trong mô đun con chứ không phải mô đun gốc ứng dụng gốc

Đừng ngu ngốc như tôi. Đã nhận được lỗi tương tự như trên, KHÔNG có các tùy chọn trong chuỗi này hoạt động. Sau đó, tôi nhận ra mình đã viết hoa 'F' trong Formgroup. Đừng!

Thay vì:

[FormGroup]="form"

Làm:

[formGroup]="form"

nếu đây chỉ là một lỗi bản in nhưng mọi thứ trên biểu mẫu của bạn đều hoạt động, bạn có thể phải khởi động lại IDE của mình

Tôi cũng gặp vấn đề tương tự, hãy đảm bảo rằng nếu sử dụng các mô hình con (ví dụ: bạn không chỉ có app.component.module.ts, mà bạn còn có một thành phần riêng như login.module.ts, mà bạn bao gồm nhập ReactiveFormsModule trong thông tin đăng nhập này .module.ts nhập, để nó hoạt động. Tôi thậm chí không phải nhập ReactiveFormsModule trong app.component.module của mình vì tôi đang sử dụng mô hình con cho mọi thứ.

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

Có thể giúp ai đó:

khi bạn có một formgroup trong một phương thức (entrycomponent), thì bạn phải nhập ReactiveFormsModule trong mô-đun nơi chế độ được khởi tạo.

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

có nghĩa là bạn cố gắng liên kết một thuộc tính bằng angular ( [prop]) nhưng không thể tìm thấy bất cứ thứ gì anh ta biết cho phần tử đó (trong trường hợp này form).

điều này có thể xảy ra bằng cách không sử dụng đúng mô-đun (thiếu một lần nhập ở đâu đó) và đôi khi chỉ gây ra lỗi chính tả như:

[formsGroup], với ssauform

Giải pháp của tôi rất tinh tế và tôi đã không thấy nó được liệt kê.

Tôi đã sử dụng các hình thức phản ứng trong thành phần Hộp thoại Vật liệu góc không được khai báo app.module.ts. Thành phần chính được khai báo app.module.tsvà sẽ mở thành phần hộp thoại nhưng thành phần hộp thoại không được khai báo rõ ràng app.module.ts.

Tôi không có bất kỳ vấn đề nào khi sử dụng thành phần hộp thoại thông thường ngoại trừ biểu mẫu đã ném lỗi này mỗi khi tôi mở hộp thoại.

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

Thứ nhất, nó không liên quan đến các phiên bản Angular> 2 . Chỉ cần nhập sau trong tệp app.module.ts của bạn sẽ khắc phục các sự cố.

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

Sau đó thêm FormsModule và ReactiveFormsModule vào mảng nhập của bạn.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Lưu ý : ReactiveFormsModuleThay vào đó, bạn cũng có thể nhập vào mô-đun cụ thể đểapp.module.ts

Khi tôi thêm mô-đun của mình vào AppModulemọi thứ bắt đầu hoạt động tốt.