I've mendapat error berikut ketika saya meluncurkan app Sudut, bahkan jika komponen ini tidak ditampilkan.
Aku harus komentar <input>
sehingga aplikasi saya bekerja.
``
zona.js:461 tidak Tertangani Janji penolakan: Template kesalahan parse:
Bisa't mengikat 'ngModel' sejak itu isn't yang diketahui milik 'input'. ("
Berikut ini adalah komponen file: `` impor { Komponen, EventEmitter, Masukan, OnInit, Output } dari '@sudut/inti'; impor { Intervensi } dari '../../model/intervensi';
@Komponen({ selector: 'intervensi yang tertera', templateUrl: 'aplikasi/intervensi/detail/intervensi.rincian.html', styleUrls: ['aplikasi/intervensi/detail/intervensi.rincian.css'] })
ekspor kelas InterventionDetails { @Input() intervensi: Intervensi;
uji publik : string = "toto"; } ``
Untuk menggunakan [(ngModel)]
di Sudut 2, 4 & 5+ Anda perlu untuk mengimpor FormsModule dari Sudut bentuk...
Juga di jalan ini dalam bentuk in Sudut repo di github:
sudut / paket / bentuk / src / arahan / ng_model.ts
Mungkin hal ini tidak sangat senang untuk AngularJs pengembang anda bisa menggunakan ng-model di mana-mana kapan saja, tapi sebagai Sudut mencoba untuk modul terpisah untuk menggunakan apa pun yang anda'd seperti yang anda ingin gunakan pada saat itu, ngModel di FormsModule sekarang.
Juga jika anda menggunakan ReactiveFormsModule, kebutuhan untuk impor itu juga.
Jadi hanya terlihat untuk app.modul.ts dan pastikan anda memiliki FormsModule
impor di...
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 { }
Juga ini yang saat ini mulai komentar untuk Angular4 ngModel
di 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!
*/
Jika anda'd ingin menggunakan masukan anda, tidak dalam bentuk, anda dapat menggunakannya dengan ngModelOptions
dan membuat standalone sejati...
[ngModelOptions]="{standalone: true}"
Untuk info lebih lanjut, Lihat ng_model di Sudut bagian di sini
Melemparkan dalam hal ini mungkin dapat membantu seseorang.
Dengan asumsi anda telah menciptakan baru NgModule, mengatakan AuthModule
yang didedikasikan untuk menangani anda Auth kebutuhan, pastikan untuk mengimpor FormsModule
di AuthModule juga.
Jika anda'akan menggunakan FormsModule
HANYA AuthModule
maka anda tidak't perlu mengimpor FormModule
default AppModule
Jadi sesuatu seperti ini di 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 { }
Kemudian lupa tentang mengimpor dalam AppModule
jika anda don't menggunakan FormsModule
di tempat lain.
Sederhana Soultion : Dalam aplikasi.modul.ts
Contoh 1
import {FormsModule} from "@angular/forms";
// add in imports
imports: [
BrowserModule,
FormsModule
],
Contoh 2
Jika anda ingin menggunakan [(ngModel)] maka anda harus impor FormsModule di app.modul.ts
import { FormsModule } from "@angular/forms";
@NgModule({
declarations: [
AppComponent, videoComponent, tagDirective,
],
imports: [
BrowserModule, FormsModule
],
providers: [ApiServices],
bootstrap: [AppComponent]
})
export class AppModule { }
Ada dua langkah yang perlu anda ikuti untuk menyingkirkan kesalahan ini
pada dasarnya aplikasi.modul.ts harus terlihat seperti di bawah ini :
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 { }
Semoga membantu
Anda perlu untuk mengimpor FormsModule di root modul jika komponen ini di root yaitu app.modul.ts
Silakan buka aplikasi.modul.ts
Impor FormsModule dari @sudut/bentuk
Ex:
import { FormsModule } from '@angular/forms';
dan
@NgModule({
imports: [
FormsModule
],
})
impor FormsModule dalam aplikasi modul.
ini akan membiarkan anda menjalankan aplikasi dengan baik.
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 { }
Jika anda perlu menggunakan [(ngModel)]
pertama anda perlu untuk mengimpor FormsModule
di app.modul.ts
dan kemudian tambahkan dalam daftar impor. Sesuatu seperti ini:
aplikasi.modul.ts
impor {FormsModule} dari "@sudut/bentuk";
impor: [ BrowserModule, FormsModule ],
aplikasi.komponen.ts
<input type="text" [(ngModel)]="" >
<h1>nama: {{nama}} </h1>
Saya menggunakan Sudut 7
Aku harus impor ReactiveFormsModule karena saya menggunakan FormBuilder kelas untuk membuat bentuk reaktif.
import {
FormsModule,
ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
], declarations: []})
I'm menggunakan Sudut 5.
Dalam kasus saya, saya perlu untuk mengimpor RactiveFormsModule juga.
aplikasi.modul.ts (atau anymodule.modul.ts)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
Jika seseorang masih mendapatkan kesalahan setelah menerapkan solusi diterima, itu bisa menjadi mungkin karena anda memiliki modul terpisah file untuk komponen yang ingin anda gunakan ngModel properti di tag input. Dalam hal ini, menerapkan solusi diterima dalam komponen's modul.ts file juga.
jika anda masih mendapatkan kesalahan setelah mengimpor FormsModule dengan benar kemudian check in di terminal anda atau (jendela konsol) karena proyek anda tidak menyusun (karena kesalahan lain yang bisa apa-apa) dan solusi anda belum tercermin di browser anda!
Dalam kasus saya, saya, konsol berikut terkait kesalahan: Properti 'retrieveGithubUser' tidak ada pada tipe 'ApiService'.
Di ngModule
anda perlu untuk mengimpor FormsModule
, karena ngModel
berasal dari FormsModule
.
Silahkan memodifikasi anda aplikasi.modul.ts seperti kode di bawah ini saya telah berbagi
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 { }
ngModel adalah berasal dari FormsModule.Ada beberapa kasus ketika anda bisa menerima kesalahan semacam ini:
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 {}
ngModel adalah bagian dari FormsModule. Dan itu harus diimpor dari @sudut/bentuk untuk bekerja dengan ngModel.
Silahkan mengubah aplikasi.modul.ts sebagai berikut:
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})