I'm having an error when I try to use ngModel inside a modal which is a component, I imported the FormsModule and ReactiveFormsModule into my modal / component module.ts and it still did not work, can anyone help me please?

On the page that calls the model I'm also importing FormsModule and still get this error:

 Can't bind to 'ngModel' since it isn't a known property of 'ion-select'

FilterModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FilterComponent } from './filter.component';
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [
    FilterComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
  ]
})
export class FilterModule { }

HTML

 <ion-content padding>
  <ion-item>
    <ion-label>Ordenar por</ion-label>
    <ion-select placeholder="Escolha a opção" interface="popover" [(ngModel)]="currentFilter.orderBy">
      <ion-select-option *ngFor="let field of sortFields" [value]="field.name">{{ field.text }}</ion-select-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>Ordem</ion-label>
    <ion-select placeholder="Ascendente" interface="popover" [(ngModel)]="currentFilter.ascending">
      <ion-select-option [value]="1">Ascendente</ion-select-option>
      <ion-select-option [value]="0">Descendente</ion-select-option>
    </ion-select>
  </ion-item>
</ion-content>

Filter.component.js

  export class FilterComponent implements OnInit {
  @Input() sortFields: any;
  @Input() currentFilter: any =  {
    orderBy: null,
    per_page: 20,
    total: "",
    page: 1,
    limit: 20,
    ascending: 0,
    search: null,
    startDate: null,
    endDate: null,
  };

  @Input() filterByRange: boolean = false;

  constructor(
    private modalCtrl: ModalController) { }

  ngOnInit() {

  }
}

1 Answers

0
viniciussvl On

I discovered the problem, I have a components.module.ts file that imports all the components of my app, so I just had to declare the FormsModule in that component.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ValidationSummaryComponent } from './validation-summary/validation-summary.component';
import { TradingViewComponent } from './modals/trading-view/trading-view.component';
import { FilterComponent } from './modals/filter/filter.component';
import { IonicModule } from '@ionic/angular';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule
    ],
    declarations: [
        ValidationSummaryComponent,
        TradingViewComponent,
        FilterComponent
    ],
    exports: [
        ValidationSummaryComponent,
        TradingViewComponent,
        FilterComponent
    ],
    entryComponents: [
        TradingViewComponent,
        FilterComponent
    ]
})
export class ComponentsModule {}