Issue
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;
}
...
}
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
ormyForm!: 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>
Answered By - davi.de
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.