I have hit a wall with this issue and I hope that somebody here can help me.

My create-recipe.component in my recipe.module needs to use the raw-material-multi-select.component from shared-components.module. I declare and export RawMaterialMultiSelect component in SharedComponents module and import it in Recipe module, but I get the following error: Can't bind to 'ngModel' since it isn't a known property of 'p-multiSelect'. p-multiSelect is a PrimeNG component. I use the multiselect component in several other places and the solution works if the components are in the same module. But when I split them up I get this error. I am at a loss and hope someone can help me.

Here are my files:

raw-material-multi-select.component.html

<p-multiSelect [options]="rawMaterialStore.rawMaterialIdentities$ | async" [(ngModel)]="selectedRawMaterials" placeholder="Ingredienser" class="filter"></p-multiSelect>

raw-material-multi-select.component.ts

import { Component, OnInit } from '@angular/core';
import { RawMaterialStoreService } from '../../raw-material/raw-material-store.service';

@Component({
  selector: 'raw-material-multi-select',
  templateUrl: './raw-material-multi-select.component.html',
  styleUrls: ['./raw-material-multi-select.component.scss']
})
export class RawMaterialMultiSelectComponent implements OnInit {
  
  selectedRawMaterials: string = "";

  constructor(public rawMaterialStore: RawMaterialStoreService) { }

  ngOnInit(): void {
  }

}

shared-components.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MultiSelectModule } from 'primeng/multiselect';
import { RawMaterialMultiSelectComponent } from './raw-material-multi-select/raw-material-multi-select.component';

@NgModule({
  declarations: [
    RawMaterialMultiSelectComponent
  ],
  imports: [
    CommonModule,
    MultiSelectModule
  ],
  exports: [
    RawMaterialMultiSelectComponent
  ]
})
export class SharedComponentsModule { }

create-recipe.component.html

...
  <raw-material-multi-select></raw-material-multi-select>
...

And for good measure here is my app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    ...
    RecipesModule,
    SharedComponentsModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
...

CodePudding user response：

Looks like the MultiSelectModule & FromsModule might not be properly imported into recipe.module. You can add it into the exports array of SharedComponentsModule or directly import it in imports array of recipe.module :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MultiSelectModule } from 'primeng/multiselect';
import { RawMaterialMultiSelectComponent } from './raw-material-multi-select/raw-material-multi-select.component';
import { MultiSelectModule } from 'primeng/multiselect';

@NgModule({
  declarations: [
    RawMaterialMultiSelectComponent
  ],
  imports: [
    CommonModule,
    MultiSelectModule,
    FromsModule
  ],
  exports: [
    RawMaterialMultiSelectComponent,
    MultiSelectModule,
    FromsModule
  ]
})
export class SharedComponentsModule { }

CodePudding user response：

You have to import FormsModule into the module you use ngModel.

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    FormsModule
    ...
  ],
  providers: [...],
  bootstrap: [...]
})