Нет поставщика для ошибки ControlContainer при использовании угловых форм материалов с угловым 6

Question

Я уже написал приложение, использующее Angular 6, и добавляю в него материал Angular.

Подход с использованием реактивных форм используется в существующем приложении

У меня есть модуль входа, который имеет декларацию ниже,

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

Компонент Login имеет следующий шаблон: login.component.html

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

AppModule импортирует LoginModule вЭто.

Я получаю ошибку консоли ниже при отображении login.html

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

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

Эта ошибка устраняется, когда я добавляю FormsModule в LoginModule, как показано ниже

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

Нужно ли добавить FormsModule для работы угловых форм материала?

Но что, если мы будем использовать реактивные формы, как в случае с моим примером приложения?