"Can't bind to 'formGroup' since it isn't a known property of 'form" Code Answer's

 My code environment is Angular 9, and when I set up reactive form, I met this error: error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'. I did s

Solution 1:

If the RecipeEditComponent belongs to AppModule, you need to declare the RecipeEditComponent in app.module.ts:

import { RecipeService } from './recipes/recipe.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';

import { RoutingModule } from './routing.module';
import { ShoppingListService } from './shopping-list/shopping-list.service';
import { AppComponent } from './app.component';
// Add following line:
import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component'; // add this
import { RecipesComponent } from './recipes/recipes.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { HeaderComponent } from './header/header.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
import { DropdownDirective } from './shared/dropdown.directive';

@NgModule({
  declarations: [
    AppComponent,
    RecipesComponent,
    RecipeEditComponent, // add this and the import line
    RecipeListComponent,
    RecipeItemComponent,
    RecipeDetailComponent,
    HeaderComponent,
    ShoppingListComponent,
    ShoppingEditComponent,
    DropdownDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    RoutingModule
  ],
  providers: [ShoppingListService, RecipeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Otherwise if it belongs to another module, you need to import FormsModule and ReactiveFormsModule in the module which it belongs to.


Solution 2:

you need to import FormsModule and ReactiveFormsModule in the module which it belongs to.

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


Solution 3:

Need to import following in app.module.ts file:

BACA JUGA
  • Can Not Find Params From Route In Angular
  • Property 'auth' Does Not Exist On Type 'typeof Import("/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")'. Ts(2339)
  • Array Of Arrays In TypeScript
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

formGroup is a selector for the directive named FormGroupDirective which is part of ReactiveFormsModule, is used to bind FormGroup data to a component element.

Then add it in imports array of the module like the following:

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Solution 4:

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

make sure to import at the top of your app.module.ts


Comments

Post a Comment

Popular posts from this blog

How to Send Whatsapp Message Through HTML Link?

  If you have a blog or website, you can use HTML to create a Whatsapp form link for all your readers on your articles, which allows them to send WhatsApp messages to you easily with just 1 click. You can ask this from your clients or existing customers of yours. Asking for feedback in this way provides your readers a means of connecting with you by using the messaging app they use on a daily basis.  how to make a whatsapp hyperlink html on  Jan 01, 1970 <!-- Try this link "formula" out :) --> < a href = " https://wa.me/<number> " target = " _blank " > Link Text Here </ a > <!-- where the <number> is a full phone number in international format. Omit any zeroes, brackets, or dashes when adding the phone number in international format. --> Add Comment 0 whatsapp link on  Jan 01, 1970 <!--just telephone number--> https://wa.me/1XXXXXXXXXX <!--Telephone with message--> https://wa.me/1XXXXXXXXXX?text=I...
Read more

rigidbody.addforce not working

Image
  Rigidbodies are used to link or attach one object to another allowing the simulated object to deform under normal forces. Most rigidbodies use an addForce method which adds force to an object based on their location. If the force is not applied correctly, an error could be thrown and this may result in unexpected behavior when using it. rigidbody.addforce not working By  Daragard  on  Apr 26, 2021 //Even though Unity says that transform.forward = Vector3(0, 0, 1) that is not the case //This is the line that you want gameObject.GetComponentOfType<Rigidbody>().AddForce(transform.forward * 200,ForceMode.Impulse);; //This line will give you seemingly random values gameObject.GetComponentOfType<Rigidbody>(). AddForce(new Vector3(0, 0, 200, ForceMode.Impulse); Add Comment -1 All the possible answers of the questions are given above. You can also give your valauable suggestions.
Read more

How to Change the Text Button Color in the Flutter?

Image
  How to Change the Text Button Color in the Flutter? You may use the built-in setColor function from android_material_palette. Note that there is an overload to this method, so you can actually pass the color argument for setting color(s) at one time. Also, note that you need to add the palette dependency in your pubspec.YAML file as follows: flutter text button By  PHDinStackoverflow  on  Apr 20, 2021 TextButton( onPressed: () { // Respond to button press }, child: Text("TEXT BUTTON"), ) Add Comment 1 text button flutter By  VasteMonde  on  Mar 18, 2021 TextButton.icon({ Key key, @required VoidCallback onPressed, VoidCallback onLongPress, ButtonStyle style, FocusNode focusNode, bool autofocus, Clip clipBehavior, @required Widget icon, @required Widget label }) // Example: TextButton.icon( icon: Icon(Icons.camera), label: Text('Take A Photo'), onPressed: () {}, ) Add C...
Read more