Question

我是角/离子的新手，尝试在离子角分量上使用ReactiveFormsModule时遇到问题，出现错误：

Can't bind to 'formGroup' since it isn't a known property of 'form'

当我将ReactiveFormsModule添加到somepage.page.ts时，它可以正常工作，因为我可以将其包含在somepage.module.ts中，但是，当我想将其添加到组件视图中时，可以从应用程序导入必要的模块.module.ts，它不起作用。

app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

...

@NgModule({
  ...
  imports: [
    ...
    FormsModule,
    ReactiveFormsModule
  ],

someview.component.ts

import { FormBuilder, FormGroup, Validators, AbstractControl, ReactiveFormsModule } from '@angular/forms';

export class SomeviewComponent implements OnInit {
  newCaseFormGroup: FormGroup;
  name: AbstractControl;

  constructor(
    private formBuilder: FormBuilder,
  ) {
    this.newCaseFormGroup = formBuilder.group({
      name: ['', Validators.required]
    });

    this.name = this.newCaseFormGroup.controls['name'];
  }
}

someview.component.html

  <form [formGroup]="newCaseFormGroup">
    <input type="text" formControlName="name">
    <input type="submit" [disabled]="!newCaseFormGroup.valid">
  </form>

someview.component.html通过共享模块加载到somepage.page.ts中：

shared-module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

import { SomeviewComponent } from '../components/someview/someview.component';

@NgModule({
    imports: [
        CommonModule,
        IonicModule
    ],
    declarations: [
        SomeviewComponent
    ],
    providers: [],
    exports: [
        SomeviewComponent
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})
export class SharedModule { }

我的理解是，如果我在app.module.ts中包含模块，那么它们应该在整个应用程序中都可用。

我也尝试过将它们添加到somepage.page.ts中，这会加载此组件someview.component.ts，结果是相同的。

再一次，当我将反应形式添加到somepage.page.ts并包含somepage.module.ts中的模块时，它会按预期工作。我缺少使它在组件上运行的小东西。

再次感谢您的帮助！

Answer 1

这是应如何构建应用程序的方式：

app.module.ts：

@NgModule({
  declarations: [
    AppComponent,

    NavBarComponent,
    ProgressBarComponent,
    SocialMediaComponent,
    NotFoundComponent,
  ],
  imports: [
    TranslModule,
    SharedModule,
    BrowserAnimationsModule,
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts和lazyLoadModules内部：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeModule } from './routes/home/home.module';
import { AboutModule } from './routes/about/about.module';
import { NewsModule } from './routes/news/news.module';
import { PricesModule } from './routes/prices/prices.module';
import { BookingModule } from './routes/booking/booking.module';
import { ContactModule } from './routes/contact/contact.module';
import { NotFoundComponent } from './components/not-found/not-found.component';

const routes: Routes = [
  { path: '', loadChildren: './routes/home/home.module#HomeModule' },
  { path: 'about', loadChildren: './routes/about/about.module#AboutModule' },
  { path: 'news', loadChildren: './routes/news/news.module#NewsModule' },
  { path: 'prices', loadChildren: './routes/prices/prices.module#PricesModule' },
  { path: 'booking', loadChildren: './routes/booking/booking.module#BookingModule' },
  { path: 'contact', loadChildren: './routes/contact/contact.module#ContactModule' },
  { path: '**', component: NotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html：

<app-nav-bar>
  <router-outlet></router-outlet>
</app-nav-bar>
<app-social-media></app-social-media>

nav-bar.component.html：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="'over'" [opened]="false">
    <img src="https://ik.imagekit.io/mises543/logo-163x70-Hart_Ilona_Borys_t-1gtTLMj.png" alt="Ilona Borys logo."
      style="height: 45px; padding-top: 5px;">
    <div class='sidenav-links'>
      <a mat-button (click)="drawer.toggle()" [ngClass]="active ? 'active': ''"
        routerLink="/">{{'app.nav-buttons.home' | translate}}</a>
      <a mat-button (click)="drawer.toggle()" routerLinkActive="active"
        routerLink="/about">{{'app.nav-buttons.about' | translate}}</a>
      <a mat-button (click)="drawer.toggle()" routerLinkActive="active"
        routerLink="/news">{{'app.nav-buttons.news' | translate}}</a>
      <a mat-button (click)="drawer.toggle()" routerLinkActive="active"
        routerLink="/prices">{{'app.nav-buttons.prices' | translate}}</a>
      <a mat-button (click)="drawer.toggle()" routerLinkActive="active"
        routerLink="/booking">{{'app.nav-buttons.booking' | translate}}</a>
    </div>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar>
      <span><img src="https://ik.imagekit.io/mises543/logo-163x70-Hart_Ilona_Borys_t-1gtTLMj.png"
          alt="Ilona Borys logo." style="height: 45px; padding-top: 5px;"></span>
      <span class="spacer"></span>
      <div class="navbar-mid-a">
        <a *ngIf="!(isHandset$ | async)" mat-button [ngClass]="active ? 'active': ''"
          routerLink="/">{{'app.nav-buttons.home' | translate}}</a>
        <a *ngIf="!(isHandset$ | async)" mat-button routerLinkActive="active"
          routerLink="/about">{{'app.nav-buttons.about' | translate}}</a>
        <a *ngIf="!(isHandset$ | async)" mat-button routerLinkActive="active"
          routerLink="/news">{{'app.nav-buttons.news' | translate}}</a>
        <a *ngIf="!(isHandset$ | async)" mat-button routerLinkActive="active"
          routerLink="/prices">{{'app.nav-buttons.prices' | translate}}</a>
        <a *ngIf="!(isHandset$ | async)" mat-button routerLinkActive="active"
          routerLink="/booking">{{'app.nav-buttons.booking' | translate}}</a>
      </div>
      <a mat-icon-button class="center" matTooltip='Contact uss.' routerLinkActive="active" routerLink="/contact">
        <mat-icon aria-label="contact icon">mail_outline</mat-icon>
      </a>
      <a type="button" class="center" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon" color="black">menu</mat-icon>
      </a>
    </mat-toolbar>
    <ng-content></ng-content> <!-- Content from router-outlet goes here. -->
  </mat-sidenav-content>
</mat-sidenav-container>

我显示了nav-bar.component.html，因为您可能不知道该组件中的显示方式。

home.module.ts：

@NgModule({
  declarations: [
    HomeComponent,
    CarouselComponent,
  ],
  imports: [
    HomeRoutingModule,
    SharedModule,
  ]
})
export class HomeModule { }

home-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

const routes: Routes = [
  { path: '', component: HomeComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

shared.module.ts是您导出模块的地方，这些模块将在许多其他模块中使用：

@NgModule({
    declarations: [],
    imports: [
        CommonModule,
        FirebaseModule.forRoot(),
        MaterialModule,
        TranslateModule,
    ],
    exports: [
        CommonModule,
        FirebaseModule,
        MaterialModule,
        TranslateModule,
    ],
    providers: [
        MetaService,
        SnackService,
    ]
})
export class SharedModule { }

在MaterialModule中，我拥有全部Angular Material。在FirebaseModule中，我有数据库连接模块。 TranslateModule中的ngx-translate来自TranslModule库，它将在所有位置，因此我将其导入和导出到共享模块中。在应用模块中，我将ngx-translate导入库CompletableFuture.supplyAsync()的地方，只能在主模块中进行初始化。

Answer 2

更新，问题已解决：）

app.module.ts

...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from './components/shared-module';

@NgModule({
  declarations: [...],
  entryComponents: [],
  imports: [
    ...
    FormsModule,
    ReactiveFormsModule,
    SharedModule
  ],
  providers: [...],
  bootstrap: [...]
})
export class AppModule {
}

shared-module.ts


import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

import { CoinViewComponent } from '../components/coin-view/coin-view.component';
import { SearchResultsSkeletonComponent } from './search-results-skeleton/search-results-skeleton.component';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        CommonModule,
        IonicModule,
        FormsModule,
        ReactiveFormsModule,
    ],
    declarations: [...],
    providers: [],
    exports: [...],
    schemas: [...]
})
export class SharedModule { }

总结一下 -将FormsModule, ReactiveFormsModule, SharedModule上的imports[]添加到app.module.ts上。 -将import { FormsModule, ReactiveFormsModule } from '@angular/forms';添加到shared-module.ts。 -无需在离子page.module.ts上添加import { FormsModule, ReactiveFormsModule } from '@angular/forms';。

尝试将ReactiveForms添加到组件“无法绑定到'formGroup'...”时出错

2 个答案: