Question:

How to Import componet's own module using Angular?

Problem

I have fixed the issue in my angular application - Can't bind to 'formGroup' since it isn't a known property of 'form' - by adding import import { AddEditModule } from './add.edit.module'; to my component.

It works well but I have never seen anybody importing the component's own module inside the component. Can someone help me understand if it is the right fix or rather merely a patch to the issue, please?

My Module:

import { CommonModule } from '@angular/common';

import { NgModule } from '@angular/core';

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

import { RouterModule } from '@angular/router';

import { AutoGeneratorComponent } from './auto-generator.component'; <= here is my controversial import that fixes the problem

@NgModule({

imports: [

CommonModule,

FormsModule,

ReactiveFormsModule,

RouterModule

declarations: [

AutoGeneratorComponent

exports:[

AutoGeneratorComponent,

})

export class AutoGeneratorModule { }

and My component:

import { AfterViewInit, Component, ElementRef, OnInit, QueryList, Renderer2, ViewChildren } from '@angular/core';

import { ActivatedRoute, Router } from '@angular/router';

import { Subscription, finalize } from 'rxjs';

import { AccountService, AlertService } from 'src/app/_services';

import { AutoGeneratorModule } from './auto-generator.module';

@Component({

selector: 'app-auto-generator',

templateUrl: './auto-generator.component.html',

styleUrls: ['./auto-generator.component.less']

})

export class AutoGeneratorComponent implements OnInit, AfterViewInit{

@ViewChildren("progressFile") progressChildren: QueryList<ElementRef>;

private accountService: AccountService;

private alertService: AlertService;

private router: Router;

private route: ActivatedRoute;

private renderer: Renderer2;

fileName: any;

fileHasBeenSelected: boolean = false;

submitted: boolean;

uploadSub: Subscription;

uploadProgress: number;

constructor($accountService: AccountService, $alertService: AlertService, $router: Router, $route: ActivatedRoute) {

this.accountService = $accountService;

this.alertService = $alertService;

this.router = $router;

this.route = $route;

}

...

}

Solution

You should never be importing the module into your component.

Your AutoGeneratorModule looks correct however:

Ensure in your auto-generator.component.ts you are correctly assigning a variable like: myForm!: FormGroup or myForm!: UntypedFormGroup
Also ensure in your auto-generator.component.html file you are correctly binging myForm to [formGroup]="myForm"
Make sure your AutoGeneratorModule is correctly imported in your root module

An example would look like:

export class MyComponent {

myForm!: FormGroup;

constructor(private fb: FormBuilder) {

this.myForm = this.fb.group({

firstName: ['', [Validators.required]],

lastName: ['', [Validators.required]],

});

}

<label>First Name</label>

</form>

>Why Redux-toolkit payload don't reconigze type in TypeScript?