无法绑定到formGroup,因为它不是'form'的已知属性。 (“-离子模态

时间:2019-03-08 23:09:18

标签: ionic-framework angular-reactive-forms ionic4

我正在尝试在离子模态中使用反应形式。我收到-无法绑定到formGroup,因为它不是'form'的已知属性。 (“消息。我已经看到,当未导入ReactiveFormsModule时,通常会收到此错误。就我而言,该错误已导入到app.module.ts文件和pairing-modal.module.ts文件中。我很好奇是否表单在模式组件中时,导入方式是不同的。我也尝试仅在父文件(模式调用者)中没有成功。

    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>

0 个答案:

没有答案