{"action":"closed","issue":{"url":"https://api.github.com/repos/valor-software/ng2-charts/issues/353","repository_url":"https://api.github.com/repos/valor-software/ng2-charts","labels_url":"https://api.github.com/repos/valor-software/ng2-charts/issues/353/labels{/name}","comments_url":"https://api.github.com/repos/valor-software/ng2-charts/issues/353/comments","events_url":"https://api.github.com/repos/valor-software/ng2-charts/issues/353/events","html_url":"https://github.com/valor-software/ng2-charts/issues/353","id":171039899,"number":353,"title":"Incompatible with new forms module after migrate to RC5","user":{"login":"raychenfj","id":3245316,"avatar_url":"https://avatars3.githubusercontent.com/u/3245316?v=4","gravatar_id":"","url":"https://api.github.com/users/raychenfj","html_url":"https://github.com/raychenfj","followers_url":"https://api.github.com/users/raychenfj/followers","following_url":"https://api.github.com/users/raychenfj/following{/other_user}","gists_url":"https://api.github.com/users/raychenfj/gists{/gist_id}","starred_url":"https://api.github.com/users/raychenfj/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/raychenfj/subscriptions","organizations_url":"https://api.github.com/users/raychenfj/orgs","repos_url":"https://api.github.com/users/raychenfj/repos","events_url":"https://api.github.com/users/raychenfj/events{/privacy}","received_events_url":"https://api.github.com/users/raychenfj/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-08-14T03:21:05Z","updated_at":"2017-08-18T03:22:40Z","closed_at":"2017-08-18T03:22:40Z","body":"Hi,\nAfter I migrate to RC5, when I try to use the new forms module and ng2-charts together, something weird happened.\n1. When I try to bind a method to ngSubmit, then the method fire twice;\n2. When I try to validate the form using ngForm, its status is not updated.\n\nAfter I remove ng2-charts, everything works fine. \n\nI think It’s caused by using deprecated form modules in ng2-charts. You can see the log when start up the app.\n![image](https://cloud.githubusercontent.com/assets/3245316/17646960/c8c52060-6210-11e6-8882-8e2d48a8c4fe.png)\n\nMinimal demo attached based on Angular2 quickstart to reproduce this issues.  Hope it help.\napp.component.ts\n\n```\nimport { Component } from '@angular/core';\n\n@Component({\n    selector: 'my-app',\n    template: `<div>\n                    <form (ngSubmit)=\"onSubmit()\" #demoForm=\"ngForm\">\n                    <input [(ngModel)]=\"input\" name=\"input\" #demoInput=\"ngModel\" required>\n                    <p>Input is updated</p>\n                    <p>Input status: valid {{demoInput.valid}} invalid {{demoInput.invalid}} \n                                    dirty {{demoInput.dirty}} pristine {{demoInput.pristine}} \n                                    touched {{demoInput.touched}} untouched {{demoInput.untouched}}</p>\n\n                    <button type=\"submit\">Call Tiwce With One Click</button>\n                    <p>Form status is static, not updated</p>\n                    <p>form status: valid {{demoForm.form.valid}} invalid {{demoForm.form.invalid}} \n                                    dirty {{demoForm.form.dirty}} pristine {{demoForm.form.pristine}} \n                                    touched {{demoForm.form.touched}} untouched {{demoForm.form.untouched}}</p>\n                    </form>\n                </div>\n\n                <base-chart class=\"chart\"\n                [data]=\"pieChartData\"\n                [labels]=\"pieChartLabels\"\n                [chartType]=\"pieChartType\"\n                (chartHover)=\"chartHovered($event)\"\n                (chartClick)=\"chartClicked($event)\"></base-chart>`\n})\n\nexport class AppComponent {\n    input:String;\n    // Pie Chart From ng2-charts demo   \n    // Pie\n    public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];\n    public pieChartData: number[] = [300, 500, 100];\n    public pieChartType: string = 'pie';\n\n    // events\n    public chartClicked(e: any): void {\n        // console.log(e);\n    }\n\n    public chartHovered(e: any): void {\n        // console.log(e);\n    }\n\n    onSubmit(){\n        console.log(\"Submit Called Tiwce\");\n    }\n}\n```\n\napp.module.ts\n\n```\nimport { NgModule }      from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FormsModule } from '@angular/forms';\n\nimport { AppComponent }  from './app.component';\nimport { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';\n\n@NgModule({\n  imports: [ BrowserModule,FormsModule ],\n  declarations: [ AppComponent,CHART_DIRECTIVES ],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n```\n"}}
{"actor":{"display_login":"raychenfj"}}