Ufdjrw

I am trying to use a reactive form in an Ionic Modal. I receive the - Can't bind to formGroup since it isn't a known property of 'form'. (" message. I have seen that this error is typically received when ReactiveFormsModule is not imported. In my case it is imported in the the app.module.ts file and pairing-modal.module.ts file. I am curious if maybe the imports are different when the form is in the modal component. I have also tried to only in the parent file( caller to the modal) with no success.

 app.module.ts:
 import PairingModalPage from './pairing-modal/pairing-modal.page';
 import WorkerService from './services/worker-service';
 import Firebase from '@ionic-native/firebase/ngx';
 import AngularFireFunctions from '@angular/fire/functions';
 import AngularFireMessaging from '@angular/fire/messaging';
 import FcmService from './fcm.service';
 import PairingService from './services/pairing-service';
 import CourseMemberService from './services/course-member.service';
 import NgModule from '@angular/core';
 import HttpClientModule from '@angular/common/http';
 import BrowserModule from '@angular/platform-browser';
 import RouteReuseStrategy from '@angular/router';
 import IonicModule, IonicRouteStrategy from '@ionic/angular';
 import SplashScreen from '@ionic-native/splash-screen/ngx';
 import StatusBar from '@ionic-native/status-bar/ngx';
 import BrowserAnimationsModule from '@angular/platform- 
 browser/animations';
 import AppComponent from './app.component';
 import AppRoutingModule from './app-routing.module';
 import AngularFireModule from '@angular/fire';
 import AngularFireDatabaseModule from '@angular/fire/database';
 import AngularFireAuthModule from '@angular/fire/auth';
 import AngularFirestoreModule from '@angular/fire/firestore';
 import environment from './../environments/environment';
 import AuthService from './services/auth.service';
 import CourseService from './services/course.services';
 import EventService from './services/event.service';
 import EventPlayingCountService from './services/event-playing- 
 count.service';
 import GroupService from './services/group.service';
 import GlobalService from './services/global.service';
 import GroupEventService from './services/group-event';
 import GroupInviteService from './services/group-invite.service';
 import RsvpService from './services/rsvp.service';
 import MemberService from './services/member.service';
 import MatButtonModule,
 MatCheckboxModule,
 MatDividerModule,
 MatFormFieldModule,
 MatInputModule,
 MatDatepickerModule,
 MatNativeDateModule,
 MatTableModule,
 MatTabsModule,
 MatSelectModule,
 MatListModule,
 MatExpansionModule,
 MatDialogModule,
 MatCardModule,
 MatProgressSpinnerModule
 from '@angular/material';
 import RsvpDialogComponent from './rsvp-dialog/rsvp- 
 dialog.component';
 import GenDialogComponent from './gen-dialog/gen-dialog.component';
 import SpinnerComponent from './spinner/spinner.component';
 import ScorecardService from './services/scorecard.service';

 @NgModule(
 declarations: [ AppComponent, RsvpDialogComponent, GenDialogComponent, 
SpinnerComponent, PairingModalPage ],
 entryComponents: [ 
 RsvpDialogComponent,
 GenDialogComponent,
 PairingModalPage,
 ],
 imports: [BrowserModule,
 IonicModule.forRoot(),
 BrowserAnimationsModule,
 AngularFireModule.initializeApp(environment.firebase),
 AngularFireDatabaseModule,
 AngularFireAuthModule,
 AngularFirestoreModule,
 MatButtonModule,
 MatDividerModule,
 MatCheckboxModule,
 MatFormFieldModule,
 MatSelectModule,
 MatDatepickerModule,
 MatListModule,
 MatNativeDateModule,
 MatTableModule,
 MatTabsModule,
 MatExpansionModule,
 MatListModule,
 MatCardModule,
 MatDialogModule,
 MatInputModule,
 MatProgressSpinnerModule,
 HttpClientModule,
 AppRoutingModule],
 providers: [
 StatusBar,
 SplashScreen,
 RsvpService,
 AuthService,
 CourseService,
 ScorecardService,
 EventService,
 EventPlayingCountService,
 GroupService,
 GroupInviteService,
 MemberService,
 PairingService,
 GlobalService,
 GroupEventService,
 CourseMemberService,
 FcmService,
 WorkerService,
 AngularFireMessaging,
 AngularFireFunctions,
 Firebase,
 provide: RouteReuseStrategy, useClass: IonicRouteStrategy 
 ],
 bootstrap: [AppComponent]
 )
 export class AppModule 

 pairing-modal.module.ts (modal file)
 import NgModule from '@angular/core';
 import CommonModule from '@angular/common';
 import FormsModule, ReactiveFormsModule from '@angular/forms';
 import Routes, RouterModule from '@angular/router';

 import IonicModule from '@ionic/angular';

 import PairingModalPage from './pairing-modal.page';

 const routes: Routes = [
 
 path: '',
 component: PairingModalPage
 
 ];

 @NgModule(
 imports: [
 CommonModule,
 FormsModule,
 IonicModule,
 ReactiveFormsModule,
 RouterModule.forChild(routes)
 ],
 declarations: [PairingModalPage],

 )
 export class PairingModalPageModule 

 pairing-modal.page.ts

 import FormBuilder, FormControl from '@angular/forms';
 import take from 'rxjs/operators';
 import Subscription from 'rxjs/Subscription';
 import Component from '@angular/core';
 import ModalController, NavParams from '@ionic/angular';
 import GroupService from '../services/group.service';
 import RsvpService from '../services/rsvp.service';
 import MemberService from '../services/member.service';

 @Component(
 selector: 'app-pairing-modal',
 templateUrl: './pairing-modal.page.html',
 styleUrls: ['./pairing-modal.page.scss'],
 )
 export class PairingModalPage 

 subscription: Subscription;
 rsvpId: string;
 members: any[] = [];
 selected: any;

 selectForm = this.fb.group(
 members: new FormControl(),
 );

 constructor(
 private modalCtrl: ModalController,
 private groupService: GroupService,
 private memberService: MemberService,
 private rsvpService: RsvpService,
 private fb: FormBuilder,
 private navParams: NavParams,
 ) 

 ionViewWillEnter() 
 this.subscription = new Subscription;
 this.rsvpId = this.navParams.get('rsvpId');
 const subscription = this.rsvpService.getByDocId(this.rsvpId)
 .valueChanges()
 .pipe(take(1))
 .subscribe((rsvp: any) => 
 for (let group of rsvp.event.groups) 
 const groupSubscription = this.groupService.getByDocId(group)
 .valueChanges()
 .pipe(take(1))
 .subscribe((group: any) => 
 for (let member of group.members) 
 const memberSubscription = 
 this.memberService.getMemberByDocId(member)
 .valueChanges()
 .pipe(take(1))
 .subscribe((member: any) => 
 const tempMember = as any;
 tempMember.id = member.id;
 tempMember.firstname = member.firstname;
 tempMember.lastname = member.lastname;
 this.members.push(tempMember);
 )
 this.subscription.add(memberSubscription);
 
 this.subscription.add(groupSubscription);
 )
 this.subscription.add(subscription);
 
 )
 

 savePairing() 
 console.log('this.selected', this.selected);
 console.log('this.form', this.selectForm);
 this.modalCtrl.dismiss(
 members: this.selectForm.value,
 );
 
 

 modal-pairing.page.html

 <ion-header>
 <ion-toolbar>
 <ion-title>pairingModal</ion-title>
 </ion-toolbar>
 </ion-header>

 <ion-content padding>
 <form [formGroup]="selectForm" (ngSubmit)="savePairing()">
 <ion-item>
 <ion-label>Members that are playing</ion-label>
 <ion-select multiple="true" cancelText="Cancel" okText="Okay!">
 <ion-select-option *ngFor="let member of members" 
formControlName="members">

 member.firstname member.lastname 
 </ion-select-option>
 </ion-select>
 </ion-item>
 <ion-button size="small" type="submit" >
 <label> Save </label>
 </ion-button>
 </form>
 </ion-content>