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

Answer 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.