Ng2-charts: Incompatible with new forms module after migrate to RC5

[raychenfj]

Hi,
After I migrate to RC5, when I try to use the new forms module and ng2-charts together, something weird happened.

1. When I try to bind a method to ngSubmit, then the method fire twice;
2. When I try to validate the form using ngForm, its status is not updated.

After I remove ng2-charts, everything works fine.

I think It’s caused by using deprecated form modules in ng2-charts. You can see the log when start up the app.

Minimal demo attached based on Angular2 quickstart to reproduce this issues. Hope it help.
app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
                    <form (ngSubmit)="onSubmit()" #demoForm="ngForm">
                    <input [(ngModel)]="input" name="input" #demoInput="ngModel" required>
                    <p>Input is updated</p>
                    <p>Input status: valid {{demoInput.valid}} invalid {{demoInput.invalid}} 
                                    dirty {{demoInput.dirty}} pristine {{demoInput.pristine}} 
                                    touched {{demoInput.touched}} untouched {{demoInput.untouched}}</p>

                    <button type="submit">Call Tiwce With One Click</button>
                    <p>Form status is static, not updated</p>
                    <p>form status: valid {{demoForm.form.valid}} invalid {{demoForm.form.invalid}} 
                                    dirty {{demoForm.form.dirty}} pristine {{demoForm.form.pristine}} 
                                    touched {{demoForm.form.touched}} untouched {{demoForm.form.untouched}}</p>
                    </form>
                </div>

                <base-chart class="chart"
                [data]="pieChartData"
                [labels]="pieChartLabels"
                [chartType]="pieChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></base-chart>`
})

export class AppComponent {
    input:String;
    // Pie Chart From ng2-charts demo   
    // Pie
    public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
    public pieChartData: number[] = [300, 500, 100];
    public pieChartType: string = 'pie';

    // events
    public chartClicked(e: any): void {
        // console.log(e);
    }

    public chartHovered(e: any): void {
        // console.log(e);
    }

    onSubmit(){
        console.log("Submit Called Tiwce");
    }
}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';
import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';

@NgModule({
  imports: [ BrowserModule,FormsModule ],
  declarations: [ AppComponent,CHART_DIRECTIVES ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

[petewalker]

Duplicate of #352

[erasethis]

I simply removed the directives statement from BaseChartComponent which fixed this problem for me.

[MichaelMarner]

See my pull request #386, I have updated this package to work as an NgModule. I also have a branch that includes all the compiled files, so you can use it with npm install:

npm install MichaelMarner/ng2-charts/#dist

Just remove all references to CHART_DIRECTIVES, and instead import ChartsModule in your app's NgModule declaration.