Ngx-chips: Security Error on unit tests using onlyFromAutocomplete

[Rataah]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Current behavior

Using the attribute [onlyFromAutocomplete]="true" raise a security error during unit tests.

Failed: Template parse errors:        Binding to event property 'onlyFromAutocomplete' is disallowed for security reasons, please use (lyFromAutocomplete)=...        
If 'onlyFromAutocomplete' is a directive input, make sure the directive is imported by the current module. ("
              [placeholder]="'Filter by area'"
              [secondaryPlaceholder]="'Filter by area'"
              [ERROR ->][onlyFromAutocomplete]="true">
              <tag-input-dropdown [showDropdownIfEmpty]="true" [autocomplet"): ng:///DynamicTestModule/MappingComponent.html@11:6        
parse@http://localhost:9876/_karma_webpack_/vendor.bundle.js:84997:80        
_compileTemplate@http://localhost:9876/_karma_webpack_/vendor.bundle.js:99149:44

We tried with the syntax onlyFromAutocomplete="{{true}}", a security error is still raised

--

Expected behavior
No security error

What do you use to build your app?. Please specify the version
angular-cli (1.3.2)

Angular version:
4.4.3

ngx-chips version:
1.5.3

Browser:
Karma (1.7.1) with PhantomJS (4.0.5) powered by Chrome

[seanmt13]

I am also experience this issue is this caused by not importing it properly?

[seanmt13]

Actually what i found that caused my issue was that i put [onlyFromAutocomplete] on the wrong tag. it needs to be on the tag.

[Gbuomprisco]

Hi @Rataah, can you paste your code?

[WaleedAli070]

Facing similar issue. Is this the problem with importing module?

[pramod9254]

I am also facing the same issue
My code is:
[onlyFromAutocomplete]="true">
[autocompleteItems]="['iTem1', 'item2', 'item3']">

Error:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Binding to event property 'onlyFromAutocomplete' is disallowed for security reasons, please use (lyFromAutocomplete)=...
If 'onlyFromAutocomplete' is a directive input, make sure the directive is imported by the current module. ("

    <tag-input [ngModel]="['@item']"
  [ERROR ->][onlyFromAutocomplete]="true">

[a"): ng:///TaskModule/TaskComponent.html@26:6
Can't bind to 'onlyFromAutocomplete' since it isn't a known property of 'tag-input'.

1. If 'tag-input' is an Angular component and it has 'onlyFromAutocomplete' input, then verify that it is part of this module.
2. If 'tag-input' 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. ("

    <tag-input [ngModel]="['@item']"
  [ERROR ->][onlyFromAutocomplete]="true">

....

[yangjiel]

I am facing this error as well on my unit test. Any solution?

Example code:

<tag-input formControlName="module"
           [onlyFromAutocomplete]="true">
    <tag-input-dropdown
            [autocompleteItems]="moduleList"
            [showDropdownIfEmpty]="false"
            [dynamicUpdate]="false"
            [limitItemsTo]="5">
    </tag-input-dropdown>
</tag-input>

Error message:

Binding to event property 'onlyFromAutocomplete' is disallowed for security reasons, please use (lyFromAutocomplete)=...
    If 'onlyFromAutocomplete' is a directive input, make sure the directive is imported by the current module. ("
            <td>
                <tag-input formControlName="module"
                           [ERROR ->][onlyFromAutocomplete]="true">
                    <tag-input-dropdown
...
'tag-input' is not a known element:
    1. If 'tag-input' is an Angular component, then verify that it is part of this module.
    2. If 'tag-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
            [formGroup]="rule">
            <td>
                [ERROR ->]<tag-input formControlName="module"
                           [onlyFromAutocomplete]="true">

[yangjiel]

Okay I am dumb, I forgot to import

TagInputModule, 
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule

in my test.