web-dev-qa-db-fra.com

jit_nodeValue_4 (...). $ any n'est pas une fonction Angular5

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)

Je reçois cette erreur sur le fichier requis du groupe de formulaires.

Mon code de fichier ts 

        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
  ])
});

Mon code de fichier html

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

J'ai presque tout essayé. Mais je ne parviens pas à trouver de solution J'ai importé FormsModule et ReactiveFormsModule dans mon fichier app.module.ts Pouvez-vous me suggérer un moyen de le faire 

angularangular5angular2-templateangular2-formsangular4-forms
14
arpit dadheech

Pour moi, le problème était différent.

J'utilisais le menu de matériau angulaire . Dans le modèle, le menu déclarait une variable locale comme celle-ci <mat-menu #share='matMenu'>.share était également le nom de la fonction que je souhaitais appeler dans le composant, qui était maintenant remplacé. Changer l'un des noms a résolu ce problème.

9
Patrick Geyer

A l'aide de la ligne de commande, accédez au même répertoire que le fichier package.json de l'application que vous souhaitez mettre à jour.

Exécutez npm outdated et vous verrez une liste de paquets nécessitant une mise à jour. Mon application est relativement nouvelle, donc la mise à jour de tous n'était pas un problème (si vous devez mettre à jour des packages spécifiques cela vous aidera ). Pour effectuer une mise à jour complète, exécutez npm update. Si vous relancez npm outdated, vous verrez que tout est à jour. MAIS votre application risque de ne pas être compilée maintenant. Le message d'erreur que j'ai reçu n'était pas très utile. Pour résoudre ce problème, vérifiez que toutes vos instructions d'importation sont toujours valides (l'une des miennes a été modifiée dans app.module.ts).

import { AppRoutingModule } from './app-routing.module'; a été remplacé par import { AppRoutingModule } from './/app-routing.module';

j'espère que cela t'aides

4
tony09uk

J'ai le même problème dans Angular 5 et j'ai mis à jour le paquet npm avec npm update et le problème est résolu pour moi. Il y avait un problème dans les dépendances angulaires, je l'ai donc mis à jour.

0
Vinit Solanki