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

Having the same issue after deleting the node modules folder and doing a npm install — v1shva, Jan 14 '18 at 10:47

score 52 · Answer 1 · answered Dec 26 '18 at 13:52

52

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.

answered Dec 26 '18 at 13:52

Patrick Geyer

1,515
13
30

7

Oh man, I wasted my whole weekend on this issue. Thank you So much. I wish I could do more ups to this answer. :) – Adnan Sheikh Feb 04 '19 at 06:39
2

Name collision issue – Techdive Aug 13 '19 at 05:28

score 10 · Answer 2 · answered Nov 21 '19 at 20:10

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.

score 4 · Answer 3 · answered Jan 23 '18 at 23:43

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

score 0 · Answer 4 · answered Feb 04 '18 at 09:30

0

I am getting same issue in Angular 5 and I updated npm package by npm update and problem resolved for me, there was some issue in angular dependencies so I updated it.

answered Feb 04 '18 at 09:30

Vinit Solanki

1,863
2
15
29

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

4 Answers4