معني - angularjs شرح




خطأ زاوي: "لا يمكن ربط" ngModel "لأنه ليس خاصية معروفة لـ" الإدخال " (12)

أنا أستخدم Angular 4 وأحصل على خطأ في وحدة التحكم:

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

كيف يمكنني حل هذا؟


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

في app.module.ts أضف الأسطر التالية:

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

[...]

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

استيراد نموذج الوحدة النمطية في app.module.ts.

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

في html:

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">

الجواب هو كالآتي:-

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

@ngModule({
   imports:[FormsModule];

})

تحتاج إلى إضافة هذه الواردات:

import { FormsModule } from '@angular/forms';
imports: [FormsModule]

حاول إضافة

ngModel في مستوى الوحدة

الكود هو نفسه كما هو مذكور أعلاه


في app.module.ts أضف هذا:

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

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

قم بالتحديث باستخدام Angular 7.xx ، واجهت نفس المشكلة في إحدى وحداتي .

إذا كانت موجودة في الوحدة النمطية المستقلة الخاصة بك ، أضف هذه الوحدات الإضافية:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

إذا كان app.module.ts في app.module.ts ، فأضف هذه الوحدات:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

demo بسيط لإثبات القضية.


قم أولاً باستيراد FormsModule ثم استخدم ngModel في المكون الخاص بك

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

كود HTML:

<input type='text' [(ngModel)] ="usertext" />

هذا هو الجواب الصحيح. تحتاج إلى استيراد FormsMoudle

لأول مرة في app.module.ts

**

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

** المركز الثاني في app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

مع أطيب التحيات والأمل سيكون مفيداً


واجهت هذا الخطأ عند اختبار تطبيق Angular 6 الخاص بي باستخدام Karma / Jasmine. لقد قمت بالفعل باستيراد FormsModule في وحدة المستوى الأعلى الخاصة بي. لكن عندما أضفت مكونًا جديدًا يستخدم [(ngModel)] بدأت اختباراتي بالفشل. في هذه الحالة ، كنت بحاجة إلى استيراد FormsModule في TestBed TestingModule .

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));

import { FormsModule } from '@angular/forms'; / / <<< استيراده هنا

BrowserModule, FormsModule // <<<< وهنا

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


ngModel الخاص بك لا يعمل لأنه ليس جزءًا من NgModule الخاص بك حتى الآن.

عليك أن تخبر NgModule أن لديك سلطة استخدام ngModel عبر تطبيقك ، يمكنك القيام بذلك عن طريق إضافة FormsModule إلى app.module.ts -> app.module.ts -> [] .

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })




angular-ngmodel