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

在组件类中：

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不是form的已知属性

2 个答案: