0

I have this error

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<form [ERROR ->][formGroup]="formGroup" (ngSubmit)="onSubmit()" >

And I am using Angular 7.

enter image description here

What i am doing is creating a System that allow the user to upload a excel file

And now I am in the process of uploading data with the Help of Asp.net Core as the web api.

But i already have a problem with the Front End.

And the error is 

Can't bind to 'formGroup' since it isn't a known property of 'form'.

And upon searching I found a solution, but it doesn't work for me.

This is one of the link i found. But it doesn't solved my problem

https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form

Below is the simple Html component code for uploading

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()" >
    <div >
        <input id="file" type="file" name="file"  />
    </div>
    <div >
        <button class="btn btn-primary">Submit</button>
    </div>
  </form>

Then i added code the component.ts file

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-data-ingestion',
  templateUrl: './data-ingestion.component.html',
  styleUrls: ['./data-ingestion.component.scss']
})
export class DataIngestionComponent implements OnInit {

  formGroup = new FormGroup({
    one: new FormControl
  });
  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  onSubmit() {
    console.log('I am called');
  }

}

And i also modified the code in the app.module.ts

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

And i added the code in the imports array

imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        LayoutModule,
        OverlayModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader,
                deps: [HttpClient]
            }
        })
    ],

But the error is still there. Did i forgot to modify other file? Or did i do it wrong?

Ramon bihon
  • 385
  • 1
  • 5
  • 18
  • 2
    I may be only a hunch, but i think if you rename your formGroup variable to something else, it would fix the problem. Since formGroup is a keyword used by angular – Qellson Apr 05 '19 at 05:49
  • The answer in the linked question should be enough for the given error message. – Sachin Gupta Apr 05 '19 at 05:51
  • @Qellson i already tried that But it doesn't work. The error is still there and its the same error message – Ramon bihon Apr 05 '19 at 05:53
  • try using formBuilder: https://stackoverflow.com/questions/52253567/angular-6-cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form – Jacopo Sciampi Apr 05 '19 at 06:58

0 Answers0