Question

我是角度2的新手，我尝试制作一个反应形式，但我遇到了一些麻烦。经过堆栈搜索后，我发现没有解决方案。

在这里你可以看到我的错误

代码：

查看：

<main>
    <div class="container">
        <h2>User data</h2>
        <form [formGroup]="userForm">
            <div class="form-group">
                <label>name</label>
                <input type="text" class="form-control" formControlName="name">
            </div>
            <div class="form-group">
                <label>email</label>
                <input type="text" class="form-control" formControlName="email">
            </div>
            <div class="" formGroupName="adresse">
                <div class="form-group">
                    <label>Rue</label>
                    <input type="text" class="form-control" formControlName="rue">
                </div>
                <div class="form-group">
                    <label>Ville</label>
                    <input type="text" class="form-control" formControlName="ville">
                </div>
                <div class="form-group">
                    <label>Cp</label>
                    <input type="text" class="form-control" formControlName="cp">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</main>

我的module.ts

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ContactComponent } from './contact.component';
import { FormGroup , FormControl , ReactiveFormsModule , FormsModule } from '@angular/forms';


@NgModule({
  imports: [
    NgModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    FormGroup,
    FormControl
  ],
  declarations: [
    ContactComponent
  ]
})
export class ContactModule {}

我的component.ts

import {Component} from '@angular/core';
import { FormGroup , FormControl } from '@angular/forms';

@Component({
  selector: 'contact',
  templateUrl: './contact.component.html'
  // styleUrls: ['../../app.component.css']
})
export class ContactComponent {

    userForm = new FormGroup({
        name: new FormControl(),
        email: new FormControl(),
        adresse: new FormGroup({
            rue: new FormControl(),
            ville: new FormControl(),
            cp: new FormControl(),
        })
    });
}

我不明白我的错误，因为ReactiveForm的导入就在这里。所以...我需要你的帮助:)谢谢

在我阅读你的答案并重构我的代码之后，没关系，这是有效的！问题是我在我的页面联系人模块中导入反应模块，我需要在我的应用程序模块中导入它。非常感谢您的关注:)

希望这个答案可以帮助其他人。

Answer 1

我认为这是一个旧错误，您试图通过在模块中导入随机内容来修复，现在代码不再编译了。虽然你不注意shell输出，浏览器重新加载，你仍然会得到同样的错误。

您的模块应该是：

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    ContactComponent
  ]
})
export class ContactModule {}

Answer 2

尝试

<form formGroup="userForm">

代替

<form [formGroup]="userForm">

Answer 3

尝试在组件中添加ReactiveFormsModule。

import { FormGroup, FormArray, FormBuilder,
          Validators,ReactiveFormsModule  } from '@angular/forms';

Answer 4

我已通过在shared.module中导入FormModule并在所有其他模块中导入shared.module来解决此问题。我的情况是FormModule在多个模块中使用。

Answer 5

我遇到了相同的问题，但没有导入ReactiveFormsModule，就以另一种方式解决了该问题。您可能是

ngOnInt(){

    userForm = new FormGroup({
        name: new FormControl(),
        email: new FormControl(),
        adresse: new FormGroup({
            rue: new FormControl(),
            ville: new FormControl(),
            cp: new FormControl(),
        })
     });
)

Answer 6

对于仍在为该错误而苦苦挣扎的人，请确保还将ReactiveFormsModule导入组件的module.ts文件中

意味着您将在您的app.module.ts和 mycomponent.module.ts 文件中导入ReactiveFormsModule

Answer 7

将 ReactiveForms 模块导入您的组件模块

Angular2：无法绑定到'formGroup'，因为它不是'form'的已知属性

7 个答案: