OnChange isn't working when set async (Like on an RXJS subject)

[jrgleason]

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

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[X] support request

Current behavior
I have the following code

let templateOptions = this.connectorFields[0].templateOptions;
templateOptions.options = message.args.map(
  function(factory){
    return {
      value: factory,
      label: factory
    }
});
templateOptions.change = (value) => {
  console.log("We have a change");
};

Expected behavior

per the pull request provided here it seems this should fire the console when I select an item.

However, the options are mapped properly.

Minimal reproduction of the problem with instructions

I need to fire an event when my select changes.

What is the motivation / use case for changing the behavior?
I need to be able to tell when an item is selected.

• Angular version: 2.0.X

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  typescript

[jrgleason]

I see it get added to the object...

Object {label: "Connector Factories", placeholder: "Select One", focus: false, valueProp: "value", labelProp: "label"…}change: (value)focus: falsehidden: falselabel: "Connector Factories"labelProp: "label"options: Array[18]placeholder: "Select One"valueProp: "value"__proto__: Object

[mohammedzamakhan]

I think there can be two solutions to this issue.

1. attach change function directly to the templateOptions.

2. assign new object to the this.connectorFields[0]

Please provide a plnkr.

[jrgleason]

1.) I can't do this because I am loading via require like this connectorFields: FormlyFieldConfig = require("./connector-config-form.fields");. Since functions are not valid JSON I can't get it through the loader.

2.) I am confused as to how this would work because wouldn't it just be adding the form element?

It seems strange that I wouldn't be able to add the function this way since I can add options just fine.

The plunker is a bit cooky because of the webpack require, but I can try to throw something together.

Thank you!

[jrgleason]

P.S. (Dumb question)do we have a plunkr template for ng2-formly?

[mohammedzamakhan]

@jrgleason use any plnkr from the website https://ng2.angular-formly.com/guides/

or use our template http://plnkr.co/edit/1siQrBH4CDUSzaDRFMO7?p=preview

[jrgleason]

I tried copying the options and change settings over to my local still no dice.

I noticed you had...

private userFields: Array<FormlyFieldConfig> = [];

vs my

connectorFields: FormlyFieldConfig = require("./connector-config-form.fields");

When I try the Array version I see...

ERROR in ./src/ng2/admin/connector/add/connector-config-add.component.ts (38,29): error TS2339: Property 'change' does not exist on type 'FormlyTemplateOptions'.

could I just have an old version of the formly beta 13 library?

[jrgleason]

Ok based on the Typescript message I added the change this way instead...

connectorFields: Array<FormlyFieldConfig> = require("./connector-config-form.fields");
...
this.subject.subscribe((message) => {
            this.connectorFields[0].templateOptions.options = [
                {value:"Test1", label: "Test 1"}, {value:"Test2", label: "Test 2"}
            ];
            this.connectorFields[0].change = (value) => {
                console.log("We have a change");
            };
});

This should better match the one in the example, however, I am still not getting the console message. The select does show the proper values.

[jrgleason]

Ok sorry about all that I finally got it to fail using plunker http://plnkr.co/edit/yvS90EYSEpYPXy0BRZ7s?p=preview

I think it has something to do with the RxJS I am using. But again it is weird that the options work fine.

[jrgleason]

I must be wrong about the cause because removing RxJS does not seem to help....

http://plnkr.co/edit/iNJU7iD5XXHxyLI23rlb?p=preview

If I convert it back to the old template one it works again so it has to be something in the way I am configuring stuff. However, I can't really see a difference.

[jrgleason]

Ok I have it and I will update the title. With this.doSomething(); I see the console log like I would expect, however, when I add back in the delay and RXJS...

this.subject.subscribe(this.doSomething);
setTimeout(() =>{
          this.waiting = false;
          this.subject.next();
}, 5000);

It no longer works. It looks like it is an issue with trying to set them async

http://plnkr.co/edit/OfcprFL35FxG3cHpF0Hz?p=preview

I am still getting

ERROR in ./src/ng2/admin/connector/add/connector-config-add.component.ts
(27,49): error TS2339: Property 'change' does not exist on type 'FormlyTemplateOptions'

when I try to transpile with webpack though so I have to do this.connectorFields[0].templateOptions["change"] this also appears to be a bug

[mohammedzamakhan]

Can you provide a plnkr for OnChange isn't working when set async

[mohammedzamakhan]

Since you referenced #271, I hope this PR could be of your help #286