0

So I am trying to create reactive forms but terminal throws me an error just can not understand what is wrong here. P.S in app.module.ts I already imported ReactiveFormsModule

here is the code

  <form [formGroup]="reciepeForm" (submit)="onSubmit()">
            <div class="row">
                <div class="col-12">
                    <div class="btn btn-success" type="submit">Save</div>
                    <div class="btn btn-danger" type="button">Cancel</div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id='imagePath' formControlName="name">
                    </div>
                </div>
            </div>

        </form>

here is code from .ts file

  reciepeForm: FormGroup;
  this.reciepeForm = new FormGroup({
      'name': new FormControl(),
      'imagePath': new FormControl(),
      'description': new FormControl(),
    })

and here is an error enter image description here

medzvre gena
  • 115
  • 1
  • 1
  • 9
  • 1
    Does this answer your question? [Can't bind to 'formGroup' since it isn't a known property of 'form'](https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form) – TotallyNewb Mar 08 '21 at 12:44
  • As @TotallyNewb mentions, you need to import `FormsModule` and `ReactiveFormsModule` in your module file. – Emilien Mar 08 '21 at 12:57
  • It is already imported that is why I can not understand why it does not work – medzvre gena Mar 08 '21 at 13:10

1 Answers1

1

Make sure you either:

  • Import the recipe-edit.module.ts in your AppModule

or

  • Declare the recipe-edit.component.ts in your AppModule

And as @TotallyNewb mentioned, import FormsModule and ReactiveFormsModule in your AppModule as well.

Nam Dao
  • 389
  • 2
  • 8
  • thanks a lot, reciepeEditComponent was not in AppModule but I created it using CLI It had to import automatically . Am I right? – medzvre gena Mar 08 '21 at 13:15
  • Did declaring it in the AppModule solve your issue? And as to your second point, I am not sure, as it depends on how you generated it with the Angular CLI – Nam Dao Mar 08 '21 at 13:17
  • yes it solved .. I just imported the component in app.module . I created it like all other components using ng g c reciepe-edit – medzvre gena Mar 08 '21 at 13:21