javascript - لا يمكن الارتباط بـ "ngModel" نظرًا لأنها ليست خاصية معروفة لـ "الإدخال"




angular typescript (19)

حل بسيط: في app.module.ts

مثال 1

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

مثال 2

إذا كنت تريد استخدام [(ngModel)] فعليك استيراد FormsModule في app.module.ts

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

لقد تلقيت الخطأ التالي عند بدء تشغيل تطبيق Angular ، حتى إذا لم يتم عرض المكون.

يجب أن أعلق <input> حتى يعمل تطبيقي.

    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>"): [email protected]:28 ; Zone: <root> ; Task: Promise.then ; Value: 

أنا أنظر إلى مكبس البطل ، لكنني لا أرى أي اختلاف عن الكود.

هنا هو ملف المكون:

    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";
    }

أعلم أن هذا السؤال يدور حول الزاوية 2 ، لكنني في الزاوية 4 ولم تساعد أي من هذه الإجابات.

في الزاوي 4 يجب أن يكون بناء الجملة

[(ngModel)]

أتمنى أن يساعدك هذا.


أنا أستخدم الزاوي 7

يجب أن أستورد RactiveFormsModule لأنني أستخدم فئة FormBuilder لإنشاء نموذج تفاعلي.

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

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

إذا كان هناك شخص ما ما زال يتلقى أخطاء بعد تطبيق الحل المقبول ، فقد يكون ذلك بسبب وجود ملف وحدة نمطية منفصل للمكون الذي تريد استخدام خاصية ngModel به في علامة الإدخال. في هذه الحالة ، قم بتطبيق الحل المقبول في ملف module.ts للمكون أيضًا.


إذا كنت لا تزال تتلقى الخطأ بعد استيراد FormsModule بشكل صحيح ، فقم بالتحقق من الجهاز الطرفي أو (وحدة التحكم في Windows) لأن مشروعك لا يتم تجميعه (بسبب خطأ آخر قد يكون أي شيء) ولم ينعكس الحل في متصفحك!

في حالتي ، واجهت وحدة التحكم الخاصة بي الخطأ غير ذي الصلة التالي: الخاصية 'retrieveGithubUser' غير موجودة في النوع "ApiService".


استيراد FormsModule في وحدة التطبيق لك.

من شأنه أن يسمح التطبيق الخاص بك يعمل بشكل جيد.

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

تحتاج إلى استيراد FormsModule

افتح app.module.ts

وإضافة خط

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

و

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

تحتاج إلى استيراد FormsModule

افتح app.module.ts

وإضافة خط

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

و

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

عندما فعلت البرنامج التعليمي لأول مرة ، بدا main.ts مختلفًا قليلاً عما هو عليه الآن. يبدو مشابهاً للغاية ، لكن لاحظ الاختلافات (أعلى واحد صحيح).

صيح:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

رمز البرنامج التعليمي القديم:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

في ngModule تحتاج إلى استيراد FormsModule ، لأن ngModel يأتي من FormsModule . يرجى تعديل app.module.ts مثل الكود أدناه الذي قمت بمشاركته

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 لديك لاستيراد FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

في بعض الأحيان إذا تم استيراد BrowserModule و FormsModule الأخرى ذات الصلة ، لكنني تلقيت نفس الخطأ ، فعندئذ أدركت أننا بحاجة إلى استيرادها بالترتيب ، وفي حالتي فاتني ذلك. لذا يجب أن يكون الطلب مثل BrowserModule و FormsModule و ReactiveFormsModule .

<input type="text" class="form-control" id="firstName"
                   formControlName="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

أمل أن هذا يساعد شخصاما .. :)


لأي إصدار من Angular 2 ، تحتاج إلى استيراد FormsModule في ملف app.module.ts الخاص بك وسوف يعمل على حل المشكلة.


لاستخدام [(ngModel)] في الزاوي 2 و 4 و 5+ ، تحتاج إلى استيراد FormsModule من النموذج الزاوي ...

كما أنه في هذا المسار تحت الأشكال في الريبو الزاوي في جيثب :

الزاوي / الحزم / النماذج / src / توجيهات / ng_model.ts

من المحتمل أن هذا ليس من دواعي سروري لمطوري AngularJs حيث يمكنك استخدام طراز ng في أي مكان في أي وقت من قبل ، ولكن لأن Angular تحاول فصل الوحدات النمطية لاستخدام ما تريد استخدامه في الوقت ، ngModel موجود في FormsModule الآن .

أيضًا إذا كنت تستخدم ReactiveFormsModule ، فيجب عليك استيراده أيضًا.

ببساطة يبحث عن app.module.ts وتأكد من استيراد FormsModule في ...

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

هذا أيضًا هو تعليقات البدء الحالية لـ Angular4 ngModel في 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!
 */

إذا كنت ترغب في استخدام المدخلات الخاصة بك ، وليس في نموذج ، يمكنك استخدامه مع ngModelOptions وجعلها قائمة بذاتها ...

[ngModelOptions]="{standalone: true}"

لمزيد من المعلومات ، انظر إلى ng_model في القسم الزاوي here


لقد وجدت مؤخرًا أن هذا الخطأ لا يحدث فقط في حالة نسيان استيراد FormsModule في الوحدة النمطية الخاصة بك. في حالتي كانت المشكلة في هذا الرمز

<input type="text" class="form-control" id="firstName"
                   name="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

أنا إصلاحه مع تغيير formControlName -> الاسم

 <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Enter First Name" value={{user.firstName}} [(ngModel)]="user.firstName"> 

آمل أن توفر هذه الإجابة بعض الوقت لشخص لديه نفس المشكلة.


لكي تكون قادرًا على استخدام ربط بيانات ثنائي الاتجاه FormsModule تحتاج إلى استيراد حزمة FormsModule في الوحدة النمطية Angular . لمزيد من المعلومات ، انظر البرنامج التعليمي الرسمي Angular 2 here والوثائق الرسمية forms


هذا للأشخاص الذين يستخدمون JavaScript عاديًا بدلاً من Type Script. بالإضافة إلى الرجوع إلى ملف البرنامج النصي للنماذج في أعلى الصفحة كما هو موضح أدناه

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

يجب أيضًا أن تخبر برنامج تحميل الوحدة النمطية تحميل ng.forms.FormsModule . بعد إجراء التغييرات ، تبدو خاصية imports الخاصة NgModule بطريقة NgModule كما يلي

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

ترميز سعيد!


هناك خطوتان تحتاج إلى اتباعهما للتخلص من هذا الخطأ

  1. استيراد FormsModule في وحدة التطبيق الخاصة بك
  2. اجتيازه كقيمة الواردات فيNgModule decorator

أساسا app.module.ts يجب أن تبدو أدناه:

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

آمل أن يساعد


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





input