首页 文章

Angular 4可以't bind to ' formGroup ' since it isn' t 'form'的已知属性

提问于
浏览 次
5

我是使用Angular 4的新手 . 我正在尝试在角度4中练习模型驱动的表单，但它不断得到这个错误 .

模板解析错误：无法绑定到'formGroup'，因为它不是'form'的已知属性 . （“] [formGroup] =”form“（ngSubmit）=”onSubmit（form.value）“>”）：ng：///ComponentsModule/AdsComponent.html@71：38错误：模板解析错误：无法绑定'formGroup'，因为它不是'form'的已知属性 . （“] [formGroup] =”form“（ngSubmit）=”onSubmit（form.value）“>

我试着搜索它如何解决的问题 . 大多数情况下，解决方案是在模块中导入ReactiveFormsModule . 这是我的component.ts中的代码

import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

import { HttpClient, HttpErrorResponse } from '@angular/common/http';                                                                                                                                                           


@Component({
  templateUrl: 'ads.component.html'
})
export class AdsComponent {
    form;
    ngOnInit() {
        this.form = new FormGroup({
            ads_name: new FormControl("Hello Ads!")
        });
    } 

  constructor(
    private http: HttpClient
    ) {

   }

   onSubmit = function(user) {
        console.log(user);
   }

}

这是我的component.html中的代码

<form class="form-horizontal" [formGroup] = "form" (ngSubmit)="onSubmit(form.value)">
   <div class="form-group row">
       <label class="col-md-3 form-control-label" for="ads_name">Ads Name</label>
       <div class="col-md-9">
           <input type="text" id="ads_name" name="ads_name" class="form-control" placeholder="Ads Name" formControlName="ads_name" ngModel>
       </div>
   </div>
</form>

这是我模块中的代码

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

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    ReactiveFormsModule,
    HttpClientModule,
    FormsModule
  ],
javascript html angular typescript

3 回答

  • 0

    正如您的错误所述：

    模板解析错误：无法绑定到'formGroup'，因为它不是'form'的已知属性 . （“] [formGroup] =”form“（ngSubmit）=”onSubmit（form.value）“>”）：ng：///ComponentsModule/AdsComponent.html@

    我们可以假设您的 AdsComponent 是 ComponentsModule 声明的一部分，但您已在 AppModule 中导入 ReactiveFormsModule . 所以为了使angular能够编译 AdsComponent 的模板你应该：

    1）在 ComponentsModule 中导入 ReactiveFormsModule ：

    @NgModule({
  imports: [
    ...
    ReactiveFormsModule
  ]
})
export class ComponentsModule {}

    2）或导出 ReactiveFormModule 的导入模块

    @NgModule({
  exports: [
    ...
    ReactiveFormsModule
  ]
})
export class SharedModule {}

@NgModule({
  imports: [
    ...
    SharedModule
  ]
})
export class ComponentsModule {}

    也可以看看：

    Angular 2 Use component from another module

    回复于
  • 9

    请将ReactiveFormsModule声明为测试模块的一部分 .

    beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [ReactiveFormsModule],
        declarations: [YourComponent, ...],
        providers: [...]
    });
});
    回复于
  • 0

    显然有多种解决方案 . 这对我有用 . 在 app.module.ts 中导入 ReactiveFormsModule

    import { ReactiveFormsModule } from '@angular/forms';
    回复于

相关问题