NativeScript valueChanges never emits when binding formControl on a TextField

Question

I have a TextField and I'm trying to use a formControl binding on it like this:

<TextField class="input right" [formControl]="query"></TextField>

So I can then listen for changes like this:

  public query = new FormControl('');

  ...

  this.querySubscription = this.query.valueChanges.subscribe((query) => {
      console.log(query);
      this.places.search(this.query.value)
        .then((places) => {
          this.searchResults = places;
          console.log(this.searchResults);
        }, (error => {
          // TODO: Handle error
          console.log(error);
      }));
    });

The module it resides in:

import { SharedModule } from '../../shared/shared.module';
import { MapRoutingModule } from './map-routing.module.tns';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MapComponent } from './map.component';
import { NativeScriptCommonModule } from 'nativescript-angular/common';
import { NativeScriptUISideDrawerModule } from 'nativescript-ui-sidedrawer/angular';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';

@NgModule({
  imports: [
    NativeScriptCommonModule,
    // NativeScriptFormsModule,
    MapRoutingModule,
    NativeScriptUISideDrawerModule,
    SharedModule
  ],
  declarations: [
    MapComponent,
  ],
  schemas: [NO_ERRORS_SCHEMA]
})

export class MapModule {}

The problem is that valueChanges never triggers.. then I thought "oh I might be missing NativeScriptFormsModule so I tried adding that to MapModule's imports but then I get an error instead saying No provider for ngControl, so I removed it again.

What could I be doing wrong here?

Answer 1

include NativeScriptFormsModule and ReactiveFormsModuleshould be fine :)