CODEWITHSUNDEEP
angularprimengangular-formly
Ragavan Rajan
Ragavan Rajan

Reputation: 4407

Can't bind to 'options' since it isn't a known property of 'p-selectButton'. -ngx-formly

I am using ngx-formly for my angular 5 application. I have created shared module and using formly-select button component to display some field. Below is the error which I am facing. Can anyone please help.

1. If 'p-selectButton' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'p-selectButton' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
        <p-selectButton
          styleClass="formly-select-button-style"
          [ERROR ->][options]="selectButtonOptions | async" [dataKey]="dataKey" [optionLabel]="optionLabel"
          [fo"): ng:///SharedModule/FormlySelectButtonComponent.html@19:10
Can't bind to 'dataKey' since it isn't a known property of 'p-selectButton'.

Note: I have declared the formly module in Shared.module.ts file like below 

import {FormlyModule, FormlyFieldConfig } from '@ngx-formly/core';

And in imports 

@NgModule({
  imports: [
    CommonModule,
    PanelModule,
    AccordionModule,
    MessagesModule,
    MessagesModule,
    MenuModule,
    ButtonModule,
    FormlyModule.forRoot({
      types: [
 { name: 'input', component: FormlyFieldInputComponent },
 { name: 'selectbutton', component: FormlySelectButtonComponent },
      ],

And my declarations 

declarations: [
    LoaderComponent,
    CollectionPanelBoxComponent,
    AccordionHeaderEmptyComponent,
    FormlySelectButtonComponent,
    FormlyFieldInputComponent
  ],

my Exports 

exports: [
 AccordionHeaderEmptyComponent,
    FormlyModule

]

Not sure what I am doing wrong.

Upvotes: 0

Views: 6415

Answers (1)

Ragavan Rajan
Ragavan Rajan

Reputation: 4407

Finally, after a long day, I figured out the answer.

Step 1: If you are using shared module. Make sure you have imported the necessary modules in three places.

In Shared.module.ts code: 

import {
  AccordionModule,
  ButtonModule, // First declaration point 
  DataTableModule,
  SelectButtonModule,
} from 'primeng/primeng';

Second declaration point in the same file 

@NgModule({
  imports: [
    CommonModule,
    InputTextModule,
    AccordionModule,
    ReactiveFormsModule,
    MenuModule,
    DataTableModule,
    ButtonModule, // second declaration point 
],

Third declaration point: 

exports: [
    CommonModule,
    ReactiveFormsModule,
    PanelModule,
    AccordionModule,
    LoaderComponent,
    MessagesModule,
    MenuModule,
    InputTextModule,
    ButtonModule, // third declaration point 
    DataTableModule,
    DropdownModule,
    CollectionPanelBoxComponent,
    AccordionHeaderEmptyComponent,
    FormlyModule
  ]

If everything is declared like above.

Step 2:

Then check the primeng documenation. In my case I have used

"primeng":"^4.3.0",

Note: You have to use button pButton instead of 

<button pButton type="button" label="Click" ></button>
<p-button label="Click" ></p-button>

This will definitely get rid of the issue. Hope it helps someone.

Upvotes: 1

Related Questions