javascript - kan niet binden aan ‘ngmodel’ omdat het geen bekende eigenschap van ‘Input’

Ik heb de volgende fout bij het lanceren van mijn hoekige app, zelfs als het onderdeel niet wordt weergegeven.

Ik moet commentaar geven op de <input>zodat mijn app werkt.

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
   <div>
      <label>Created:</label>
      <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
   </div>
</div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value:

Ik kijk naar de Hero Plazer, maar ik zie geen enkel verschil van mijn code.

Hier is het bestandsbestand:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';
@Component({
   selector: 'intervention-details',
   templateUrl: 'app/intervention/details/intervention.details.html',
   styleUrls: ['app/intervention/details/intervention.details.css']
})
export class InterventionDetails
{
   @Input() intervention: Intervention;
   public test : string = "toto";
}

1, Autoriteit 100%

Ja, dat is het. In de -app.module.ts -bestand, heb ik net toegevoegd:

import { FormsModule } from '@angular/forms';
[...]
@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

2, Autoriteit 26%

Om in staat te zijn om tweewegs-gegevensbinding te kunnen gebruiken voor formulieringangen die u nodig hebt om de FormsModulepakket in uw hoekmodule te importeren.

Zie voor meer informatie de officiële tutorial van Angular 2 hieren de officiële documentatie voor formulieren.

Antwoord 3, autoriteit 12%

Voor het gebruik van [(ngModel)]in Angular 2, 4& 5+, u moet FormsModuleimporteren vanuit Angular form…

Het is ook in dit pad onder formulieren in de Angular repositoryop GitHub:

hoekig / pakketten / formulieren / src / richtlijnen / ng_model.ts

Waarschijnlijk is dit niet erg prettig voor de AngularJS-ontwikkelaars, omdat je ng-modeloveral en altijd zou kunnen gebruiken, maar omdat Angular modules probeert te scheiden om te gebruiken wat je maar wilt die je op dat moment zou willen gebruiken, is ngModelnu in FormsModule.

Als u ReactiveFormsModulegebruikt, moet u deze ook importeren.

Zoek dus gewoon naar app.module.tsen zorg ervoor dat je FormsModulehebt geïmporteerd in…

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  // <<<< import it here
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule // <<<< And here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dit zijn ook de huidige beginopmerkingen voor Angular4 ngModelin FormsModule:

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

Als u uw invoer wilt gebruiken, niet in een vorm, kunt u deze gebruiken met ngModelOptionsen standalone truemaken…

[ngModelOptions]="{standalone: true}"

Kijk voor meer informatie naar ng_modelin het gedeelte Angular hier.

Antwoord 4, autoriteit 5%

U moet de FormsModule importeren.

Open app.module.tsen voeg de regels toe

import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
       FormsModule
    ],
})

Antwoord 5, autoriteit 3%

Ervan uitgaande dat je een nieuwe NgModule hebt gemaakt, bijvoorbeeld AuthModuledie speciaal is bedoeld voor het afhandelen van je authenticatiebehoeften, zorg er dan voor dat je FormsModulein die AuthModule ookimporteert. .

Als u de FormsModulealleenin de AuthModulegebruikt, hoeft u de FormModuleinde standaard AppModule.

Dus zoiets in de AuthModule:

import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';
import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';
@NgModule({
  imports:      [
    authRouting,
    FormsModule
   ],
  declarations: [
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

Vergeet dan het importeren in AppModuleals u de FormsModulenergens anders gebruikt.

Antwoord 6, autoriteit 2%

Eenvoudige oplossing: in bestand app.module.ts–

Voorbeeld 1

import {FormsModule} from "@angular/forms";
// Add in imports
imports: [
 BrowserModule,
 FormsModule
 ],

Voorbeeld 2

Als u [(ngModel)] wilt gebruiken, moet u FormsModule importeren in app.module.ts:

import { FormsModule  } from "@angular/forms";
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective,
  ],
  imports: [
    BrowserModule,  FormsModule
  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

7, Autoriteit 2%

Importeer de formulierenmodule in die modules waar u de [(NGMODEL)]

wilt gebruiken

8, Autoriteit 2%

Er zijn twee stappen die u moet volgen om deze fout op te doen:

Importeer formulierenmodule in uw app-module
Geef het als waarde van de invoer in @ngmodule-decorateur

In principe, bestand app.module.ts zou eruit moeten zien:

   import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';
    import { AppComponent }  from './app.component';
    import {AppChildComponent} from './appchild.component';
    @NgModule({
      imports:      [ BrowserModule,FormsModule ],
      declarations: [ AppComponent, AppChildComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

Antwoord 9, autoriteit 2%

ngModel is het onderdeel van FormsModule. En het moet worden geïmporteerd uit @angular/forms om met ngModel te werken.

Wijzig de app.module.ts als volgt:

import { FormsModule } from '@angular/forms';
[...]
@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

Antwoord 10, autoriteit 2%

Je moet de FormsModuleimporteren.

Open app.module.tsen voeg de regels toe

import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
       FormsModule
    ],
})

Antwoord 11, autoriteit 2%

Ik gebruik Angular 7.

Ik moet ReactiveFormsModule importeren, omdat ik de klasse FormBuilder gebruik om een reactief formulier te maken.

import {
  FormsModule,
  ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ], declarations: []})

Antwoord 12

U moet FormsModule in uw Root -module importeren als dit onderdeel in de root is ..z. App.module.ts

Vriendelijk open app.module.ts

Import formulierenmodule van @ hoek / formulieren

ex:

import { FormsModule } from '@angular/forms';

@NgModule({
imports: [
   FormsModule
],
})

13

Import formulierenmodule in u app-module.

Het zou uw aanvraag goed laten uitvoeren.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,ContactListCopmponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

14

Als u [(ngModel)]eerst wilt gebruiken, moet u FormsModuleinvoeren in app.module.tsen vervolgens toevoegen in een lijst met invoer. Zoiets als volgt:

Bestand App.module.ts

Importeer import {FormsModule} from "@angular/forms";
Voeg invoer toe
imports: [ BrowserModule, FormsModule ],

Bestand APPCOMPONENT.TS

Voorbeeld: <input type="text" [(ngModel)]="name" >
en vervolgens <h1>your name is: {{name}} </h1>

Antwoord 15

Ik gebruik Angular 5.

In mijn geval moest ik ReactiveFormsModule ook importeren.

Bestand app.module.ts(of anymodule.module.ts):

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

Antwoord 16

Als iemand nog steeds fouten krijgt na het toepassen van de geaccepteerde oplossing, kan het zijn dat u een apart modulebestand hebt voor de component waarin u de eigenschap ngModel wilt gebruiken in de invoertag. Pas in dat geval de geaccepteerde oplossing ook toe in het module.ts-bestand van de component.

Antwoord 17

Ik weet dat deze vraag over Angular 2 gaat, maar ik gebruik Angular 4 en geen van deze antwoorden heeft geholpen.

In Angular 4 moet de syntaxis zijn

[(ngModel)]

Antwoord 18

Als je nog steeds de foutmelding krijgt nadat je FormsModule correct hebt geïmporteerd, check dan in je terminal of (windows console) omdat je project niet compileert (vanwege een andere fout die van alles kan zijn) en je oplossing niet is weergegeven in je browser !

In mijn geval had mijn console de volgende niet-gerelateerde fout:

Eigenschap ‘retrieveGithubUser’ bestaat niet op type ‘ApiService’.

Antwoord 19

FormModule importeren in bestand app.module

import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })

Antwoord 20

In de module die u bereid bent om ngModelte gebruiken, moet u FormsModule

importeren

import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [
    FormsModule,
  ],
})
export class AbcModule { }

Antwoord 21

In NgModulemoet je FormsModuleimporteren, omdat ngModelafkomstig is van FormsModule.
Pas uw app.module.tsaan zoals de onderstaande code die ik heb gedeeld

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
    declarations: [
         AppComponent,
         HomeComponent
    ],
    imports: [
         BrowserModule,
         AppRoutingModule,
         FormsModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Antwoord 22

ngModelkomt van FormsModule. Er zijn enkele gevallen waarin u dit soort fouten kunt krijgen:

U hebt de FormsModule niet geïmporteerd in de importarray van modules waar uw component is gedeclareerd – de component waarin het ngModel wordt gebruikt.
U hebt de FormsModule geïmporteerd in een module die is overgenomen van een andere module. In dit geval heb je twee opties:

laat de FormsModule worden geïmporteerd in de importarray vanuit beide modules:module1 en module2. Als regel: het importeren van een module geeft geentoegang tot de geïmporteerde modules. (Import wordt niet overgenomen)
Verklaar de formulierenmodule in de import- en exportarrays in module1 om het ook in MODEL2 te kunnen zien

(In sommige versie heb ik geconfronteerd met dit probleem) U hebt de formulierenmodule correct geïmporteerd, maar het probleem staat op het invoer HTML-tag. U moet het kenmerk naamplaatje voor de ingang toevoegen en de naam van het objectgebonden in [(NGMODEL)] moet hetzelfde zijn als de naam in de naam Attribuut

23

NGmodel moet worden geïmporteerd uit @ hoek / formulieren omdat het het deel van de formulieren is. Dus ik geef je aan om je app te veranderen.module.ts in zoiets:

import { FormsModule } from '@angular/forms';
[...]
@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

24

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule     
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Antwoord 25

Voor mijn scenario moest ik zowel [CommonModule] als [FormsModule] in mijn module importeren

import { NgModule } from '@angular/core' 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { MyComponent } from './mycomponent'
@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }

Antwoord 26

Soms krijg je deze foutmelding wanneer je een component uit een module, die niet gedeeld is, in een andere module probeert te gebruiken.

Je hebt bijvoorbeeld 2 modules met module1.componentA.component.ts en module2.componentC.component.ts en je probeert de selector van module1.componentA.component.ts te gebruiken in een sjabloon binnen module2 (bijv. <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">), het zal de fout geven dat de someInputVariableInModule1 niet beschikbaar is in module1.componentA.component.ts – ook al heb je de @Input() someInputVariableInModule1in de module1.componentA.

Als dit gebeurt, wil je de module1.componentA delen zodat deze toegankelijk is in andere modules.
Dus als u module1.componentA deelt in een sharedModule, zal module1.componentA bruikbaar zijn in andere modules (buiten module1), en elke module die de sharedModule importeert, heeft toegang tot de selector in hun sjablonen door de @Input()gedeclareerde variabele.

Antwoord 27

U moet de FormsModule importeren.

#Open app.module.ts
#add the lines
import { FormsModule } from '@angular/forms';
and
@NgModule({
    imports: [
       FormsModule   <--------add this 
    ],
})
if you are using reactive form then also added  ReactiveFormsModule

Antwoord 28

Dit is voor de mensen die gewoon JavaScript gebruiken in plaats van Type Script. Naast het verwijzen naar het formulierscriptbestand bovenaan de pagina, zoals hieronder:

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

Je moet ook de modulelader vertellen om de ng.forms.FormsModulete laden. Na het aanbrengen van de wijzigingen zag mijn imports-eigenschap van de NgModule-methode er als volgt uit:

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

Antwoord 29

Ik heb een upgrade uitgevoerd van RC1 naar RC5 en kreeg deze foutmelding.

Ik heb mijn migratie voltooid (introductie van een nieuw app.module.ts-bestand, wijzigen van package.jsonom nieuwe versies en ontbrekende modules op te nemen, en ten slotte wijzigen van mijn main.tsom dienovereenkomstig op te starten, gebaseerd op het Angular2 snelstartvoorbeeld).

Ik heb een npm updategedaan en vervolgens een npm outdatedom te bevestigen dat de geïnstalleerde versies correct waren, nog steeds geen geluk.

Ik heb uiteindelijk de map node_modulesvolledig gewist en opnieuw geïnstalleerd met npm install– Voila! Probleem opgelost.

kan niet binden aan ‘ngmodel’ omdat het geen bekende eigenschap van ‘Input’