fixed errors with ngModel

angular.json

@@ -112,9 +112,6 @@
             "karmaConfig": "./karma.conf.js",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
-            "scripts": [
-              "node_modules/moment/min/moment.min.js"
-            ],
             "styles": [
               "src/scss/style.scss"
             ],

package-lock.json

@@ -6579,9 +6579,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.11",
+      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
     "lodash.clonedeep": {
       "version": "4.5.0",
@@ -7136,14 +7136,6 @@
       "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.0.0.tgz",
       "integrity": "sha512-5TTFP9s3wfiRychGcdyvpCvvxtxW1Nf2Dqmk2YBzuIhHHLT6gRq1Fsic4lYrtAUwmy0PSLhOY/XW/saYKlrSJw=="
     },
-    "ngx-daterangepicker-material": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/ngx-daterangepicker-material/-/ngx-daterangepicker-material-2.1.8.tgz",
-      "integrity": "sha512-nSS/M2CQnUSfzZwy+V5mcnE+tjqwmr+HusIDYmiE1zNARG7gkEzYWBmXIOxsC1Dx9snA3NMpqqXj2NitIhyHig==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
     "ngx-pagination": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-4.0.0.tgz",

package.json

@@ -47,7 +47,6 @@
     "ng2-charts": "^2.3.0",
     "ng2-validation-manager": "0.5.3",
     "ngx-bootstrap": "^5.0.0",
-    "ngx-daterangepicker-material": "^2.1.8",
     "ngx-pagination": "^4.0.0",
     "popper.js": "^1.15.0",
     "rxjs": "6.5.2",

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@@ -50,6 +51,8 @@ import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component
   imports: [
     BrowserModule,
     HttpClientModule,
+    FormsModule,
+    ReactiveFormsModule,
     NgxPaginationModule,
     BsDropdownModule.forRoot(),
     TabsModule.forRoot(),

src/app/dashboard/more-graphs-and-tables.component.html

@@ -6,8 +6,8 @@
           <h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</h4>
         </div>
         <div class="col-sm-5 hidden-sm-down">
-          <input type="date" id="bubbleChartBegin" name="bubbleChartBegin" [(ngModel)]="bubbleChartBegin" (ngModelChange)="bubbleChartUpdate()">
+          <input type="date" [(ngModel)]="bubbleChartBegin" (ngModelChange)="bubbleChartUpdate()">
-          <input type="date" id="bubbleChartEnd" name="bubbleChartEnd" [(ngModel)]="bubbleChartEnd" (ngModelChange)="bubbleChartUpdate()">
+          <input type="date" [(ngModel)]="bubbleChartEnd" (ngModelChange)="bubbleChartUpdate()">
         </div>
       </div>
       <div>

src/app/dashboard/more-graphs-and-tables.component.ts

@@ -13,6 +13,7 @@ export class MoreStuffComponent implements OnInit {
   @Input() public categories: any;
   bubbleChartBegin: any;
   bubbleChartEnd: any;
+  
   constructor(
     private api: ApiService,
     private currencyPipe: CurrencyPipe,