No provider for ControlContainer Error while using Angular Material Forms with Angular 6

Question

I have already written an application using Angular 6 and I am adding Angular material into it.

Reactive forms approach is used in existing application

I have a login module which has below declaration.

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
     {path:'login',component:LoginComponent}
    ]),   
    ReactiveFormsModule,
    HttpClientModule,
    MatFormFieldModule,
    MatInputModule
  ],
  declarations: [LoginComponent]
})
export class LoginModule { }

The Login component has below template - login.component.html

    <form>
            <mat-form-field>
               <input matInput placeholder="UserName">
            </mat-form-field>
    </form>

The AppModule imports the LoginModule into it.

I am getting below console error when login.html is rendered

compiler.js:1016 Uncaught Error: Template parse errors:
No provider for ControlContainer ("<section>

        [ERROR ->]<form>
                <mat-form-field>
                   <input matInput placeholder="UserName">

This error is resolved when I add FormsModule in LoginModule as below

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
     {path:'login',component:LoginComponent}
    ]),
    FormsModule, //forms module added 
    ReactiveFormsModule,
    HttpClientModule,
    MatFormFieldModule,
    MatInputModule
  ],
  declarations: [LoginComponent]
})
export class LoginModule { }

Does FormsModule needed to be added for Angular material forms to work ?

But what if we are using reactive forms as the case with my sample application ?