FormGroup и FormControl не могут быть найдены независимо от того, что я делаю

Question

Я просто строю форму, которая принимает входные данные в диалоговом окне. Я импортирую FormsModule, ReactiveFormsModule, FormBuilder, Validators, FormGroup и FormControl в модуле приложения. Когда это сделано, я получил ошибку. Когда я импортирую эти модули непосредственно в свой компонент, я получаю еще одну ошибку.

Вот мой компонент с непосредственно импортированными этими модулями ...

import { Component, OnInit, Inject, ViewEncapsulation } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { UserData } from 'app/main/profile/profile.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'edit-bio-dialog',
  templateUrl: './edit-dialog.component.html',
  styleUrls: ['./edit-dialog.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class EditBioDialog implements OnInit {

    bioForm = new FormGroup({
        'gender'        : new FormControl(),
        'birth-month'   : new FormControl(),
        'birth-date'    : new FormControl(),
        'birth-year'    : new FormControl(),
        'about'         : new FormControl()
    });

    constructor(
        public dialogRef: MatDialogRef<EditBioDialog>,
        @Inject(MAT_DIALOG_DATA) public data: UserData) {
    }

    onNoClick(): void {
        this.dialogRef.close({data:this.data});
    }

    ngOnInit(): void {
    }

}

Это дает мне ошибки .. .

error TS2304: Cannot find name 'FormGroup'
error TS2304: Cannot find name 'FormControl'

Когда я непосредственно импортирую ReactiveFormsModule и другие в компонент (а также в модуль приложения), я получаю ошибки ...

Error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

Для обеих групп и контроль.

В чем здесь проблема? Это должно быть невероятно просто, и все же я не могу заставить Angular распознать Группу и Контроль.

Answer 1

В вашем модуле приложения вы должны импортировать модули, а также важно, чтобы ваш компонент был частью того же модуля, поэтому что-то вроде:

imports: [ Forms Module, ReactiveFormsModule], declarations: [ EditBioDialog ]

Импорт FormsModule и ReactiveFormsModule вверху файла вашего компонента не обязательны. И импортировать FormBuilder, Validators, FormGroup и FormControl в ваш файл модуля также не нужно.

Answer 2

ваш EditorBioDialog должен иметь только import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms'; импорт ReactiveFormsModule и FormsModule должен быть удален

В то время как app.module должен импортировать ReactiveFormsModule, как показано ниже

app.module.ts

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

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  declarations: [
    //your components
  ],
  bootstrap: [//components]
})

Примечание: FormsModule для подхода на основе шаблонов