FormGroup 不是已知的属性表单

Question

我正在创建注册表单，但收到错误消息，指出表单组未知属性。我还有其他反应形式，它们都可以工作，但只有这个。我在应用程序模块和所有内容中添加了所有导入。想知道是不是因为 app/core/auth 中的注册页面。

compiler.js:1021 Uncaught Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<div class="container" style="margin-top: 40px;">
  <form [ERROR ->][formGroup]="registrationForm">

app.module.ts

imports: [
    FormsModule,
    ReactiveFormsModule
  ],

register.component.ts

import { RegistrationModel } from './../../../shared/models/registration.model';
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import {FormBuilder, FormGroup, ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  registrationForm: FormGroup;
  private registrationModel: RegistrationModel;

  constructor(private fb: FormBuilder) {
    this.registrationModel = new RegistrationModel;
  }

  ngOnInit() {
    this.registrationForm = this.fb.group({
      'first_name': [''],
      'middle_name': [''],
      'last_name': [''],
      'date_of_birth': [''],
    });
    this.registrationForm.valueChanges.subscribe(newVal => console.log(newVal));
  }
  onSubmit() {
    console.log(this.registrationForm);
  }
}

注册html

<div class="container" style="margin-top: 40px;">
  <form [formGroup]="registrationForm">
    <div class="row">
      <div class="col-md-12">
        <h3 class="text-center">Register Account</h3>
        <hr>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label>First Name</label>
        <input type="text" class="form-control">
      </div>
      <div class="form-group col-md-6">
        <label>Middle Name</label>
        <input type="text" class="form-control">
      </div>
    </div>

Answer 1

例如app.module.ts

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

然后

@NgModule({
  imports: [
    // ...
    FormsModule,
    ReactiveFormsModule,
    // ...
  ],
  // ...
})

在你的组件中

import {
  FormGroup,
  FormBuilder,
  FormArray,
  FormControl,
  Validators
} from '@angular/forms';
import { Component, OnInit } from '@angular/core';

在您的组件中 class:

export class MyFormWhatEverComponent implements OnInit {
// ...
myForm: FormGroup;
// ...

构造函数：

constructor(
    // ...
    private fb: FormBuilder,
    // ...
) {}

然后我必须创建我的 formGroup:

buildMyForm () {
  this.myForm = this.fb.group({
    id: this.fb.control({ value: this.data.id }),
    // ...
  });
}

最后但并非最不重要的考虑初始化：

ngOnInit() {
    this.buildMyForm();
}

Answer 2

并确保您从正确的来源导入所需的模块，如果您将它用于注册组件，请确保将其导入另一个模块。多个模块可能会导致此错误。您需要在相关模块中导入它。

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

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

并且您不需要在组件中导入 ReactiveFormsModule。

FormGroup 不是已知的属性表单

FormGroup isn't a known property of form

angular

angular-reactive-forms

formgroups

FormGroup 不是已知的 属性 表单

FormGroup isn't a known property of form

angular

angular-reactive-forms

formgroups

FormGroup 不是已知的属性表单