Importing componet's own module

Question

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 to understand if it is the right fix or rather a 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;
    }
    ...
    }

Answer 1

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]],
        });
    }
}

<form [formGroup]="myForm">
    <label>First Name</label>
    <input type="text" formControlName="firstName" />    
    
    <label>Last Name</label>
    <input type="text" formControlName="lastName" />
</form>