Creating simple form using ReactiveForm Modules in Angular 9, But getting formGroup error

Question

I am trying to Create one ReactiveFormModule in Angular 9. I have included ReactiveFormModule and FormsModule in app.component.ts. But still While executing the application getting error. Below are the code,

**Angular 9.1
Nodejs 12.16**

**app.module.ts**
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
  ....
    FormsModule,
    ReactiveFormsModule
  ],
  exports: [ReactiveFormsModule,FormsModule],
  ....
})
export class AppModule { }

**in Home component.html file**
<form [formGroup] = "myForm">
                <input type="text" formControlName = "inputValue" class="form-control" (keyup) = "fnChnageText(myForm.value)" >
            </form>

**in home.component.ts**
myForm : FormGroup;
  inputValue : string;

  constructor(private fb:FormBuilder) {
     this.myForm = this.fb.group({
      inputValue : ['',Validators.required]
     });
   }

After running the application getting error - can't bind to the formGroup. How to resolve this. Please help me

avishekdr · Accepted Answer · 2020-05-02 08:35:31Z

1

You don't need to declare inputValue seperately. The formControlName you have defined will directly watch inside your FormBuilder group and see if it's present. Also you need to import FormBuilder and Validators from @angular/forms

answered May 2, 2020 at 8:35

avishekdr

1,1463 gold badges34 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating simple form using ReactiveForm Modules in Angular 9, But getting formGroup error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related