Я пытаюсь использовать реактивную форму в ионном модале. Я получаю - Не могу связать с formGroup, так как это не известное свойство 'form'. Сообщение Импорт отличается, когда форма находится в модальном компоненте. Я также пытался сделать это только в родительском файле (вызывающий модальный), но безуспешно.
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>