jit_nodeValue_4(...).$any is not a function Angular5

Question

ERROR TypeError: jit_nodeValue_4(...).$any is not a function
at Object.eval [as handleEvent] (AddNewConnectionsComponent.html:42)
at handleEvent (core.js:13581)
at callWithDebugContext (core.js:15090)
at Object.debugHandleEvent [as handleEvent] (core.js:14677)
at dispatchEvent (core.js:9990)
at eval (core.js:10611)
at HTMLInputElement.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4744)
at ZoneDelegate.invokeTask (zone.js:420)

I am getting this error on required filed of form group.

My ts file code

        import { Component, OnInit } from '@angular/core';
        import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms'
         import {ActivatedRoute, Router} from "@angular/router";

     @Component({
   selector: 'app-add-new-connections',
 templateUrl: './add-new-connections.component.html',
 styleUrls: ['./add-new-connections.component.scss']
})
export class AddNewConnectionsComponent {

 addNewConnectionForm: any;

 constructor(public fb: FormBuilder) { 
 this.addNewConnectionForm = new FormGroup({
  'connection_name': new FormControl("", [
    Validators.required
  ])
});

My Html file code

<form [formGroup]="addNewConnectionForm" (ngSubmit)="saveConnection()" novalidate>
            <div class="col-sm-4"> 
<div class="form-group">
                  <label>Connection Name ?</label>
                  <input type="text" name="name" placeholder="" (change)="changeFun()" class="form-control" required>
                  <div *ngIf=>
                      Name is required.
                    </div>
                  <small [hidden]="addNewConnectionForm.controls.connection_name.valid" class="text-danger">Required</small>
              </div>
            </div>
            <button type="submit" [disabled]="!addNewConnectionForm.valid">Submit</button>
          </form>

I have tried almost everything avalible. But I am not able to find any solution I have imported FormsModule and ReactiveFormsModule in my app.module.ts file Can you please suggest me a way how i can do it

Solution 1

For me the issue was different.

I was using Angular material menu. In the template the menu declared a local variable like this <mat-menu #share='matMenu'>. share was also the name of the function I wanted to call in the component, which was now overwritten. Changing one of the names fixed this.

Solution 2

This normally happens when you've got two references of different data types with the same name. So you might have a Template Reference Variable of #logout and a button that calls logout() on click. Clicking the button would throw an error like the one you're getting.

Solution 3

Using the command line go to the same directory as the package.json file of the application that you want to update.

Run npm outdated and you will see a list of packages that need updating. My app is fairly new so updating all was not an issue (if you need to update specific packages this will help you). To do a full update run npm update, if you re-run npm outdated you will see everything is up to date, BUT you application may not compile now. The error message I got wasn't very helpful. To resolve this problem check all your import statement are still valid (one of mine was altered in app.module.ts)

import { AppRoutingModule } from './app-routing.module'; was changed to import { AppRoutingModule } from './/app-routing.module';

hope this helps

Comments

[v1shva]

Having the same issue after deleting the node modules folder and doing a npm install

[Patrick Geyer]

@arpit, please mark answer as correct!

[Adnan Sheikh]

Oh man, I wasted my whole weekend on this issue. Thank you So much. I wish I could do more ups to this answer. :)

[Techdive]

Name collision issue