angular - since - there is no directive with "exportas" set to "ngform"




لا يمكن الارتباط بـ "formGroup" نظرًا لأنها ليست خاصية معروفة لـ "form" (12)

إذا كان عليك استيراد وحدتين ، فقم بإضافة مثل هذا أدناه

import {ReactiveFormsModule,FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponentComponent,
    BlogComponentComponent,
    ContactComponentComponent,
    HeaderComponentComponent,
    FooterComponentComponent,
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

الوضع:

الرجاء المساعدة! أحاول تقديم شكل بسيط للغاية في تطبيقي Angular2 ولكن بغض النظر عما لا يعمل أبدًا.

النسخة السنوية:

الزاوي 2.0.0 Rc5

الخطأ:

Can't bind to 'formGroup' since it isn't a known property of 'form'

الرمز:

المنظر:

<form [formGroup]="newTaskForm" (submit)="createNewTask()">

    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" required>
    </div>

     <button type="submit" class="btn btn-default">Submit</button>

</form>

المتحكم:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';

@Component({
    selector: 'task-add',
    templateUrl: 'app/task-add.component.html'

})


export class TaskAddComponent {

    newTaskForm: FormGroup;

    constructor(fb: FormBuilder) 
    {
        this.newTaskForm = fb.group({
            name: ["", Validators.required]
        });
    }

    createNewTask()
    {
        console.log(this.newTaskForm.value)
    }

}

ngModule:

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

import { routing }        from './app.routing';
import { AppComponent }  from './app.component';
import { TaskService } from './task.service'


@NgModule({
    imports: [ 
        BrowserModule,
        routing,
        FormsModule
    ],
    declarations: [ AppComponent ],
    providers: [
        TaskService
    ],
    bootstrap: [ AppComponent ]
})


export class AppModule { }

السؤال:

لماذا أتلقى هذا الخطأ؟

هل فاتني شيء؟


إذا كانت لديك هذه المشكلة عند تطوير أحد المكونات ، فيجب عليك إضافة هاتين الوحدتين إلى أقرب وحدة نمطية:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   // other modules
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

وإذا كنت تقوم بتطوير اختبار للمكونات الخاصة بك ، فعليك إضافة هذه الوحدة إلى ملف الاختبار الخاص بك كما يلي:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactusComponent } from './contactus.component';
import { ReactiveFormsModule } from '@angular/forms';

describe('ContactusComponent', () => {
  let component: ContactusComponent;
  let fixture: ComponentFixture<ContactusComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ContactusComponent],
      imports:[
        ReactiveFormsModule
      ]

    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ContactusComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

الزاوي 4 في تركيبة مع الوحدات النمطية للميزات (إذا كنت تستخدم وحدة مشتركة على سبيل المثال) يتطلب منك أيضًا تصدير ReactiveFormsModule للعمل.

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { } 

باستخدام واستيراد REACTIVE_FORM_DIRECTIVES :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

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

export class AppModule { }

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

ثم قمت باستيرادها إلى وحدات الوالدين الخاصة بي كما هو موضح أدناه ، وقد عملت!

import { ReactiveFormsModule,FormsModule  } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';

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

حسنًا بعد إجراء بعض عمليات الحفر ، وجدت حلاً لـ "لا يمكن ربط" formGroup "نظرًا لأنها ليست خاصية معروفة لـ" نموذج "."

بالنسبة لحالتي ، كنت أستخدم ملفات وحدات متعددة ، أضفت ReactiveFormsModule في app.module.ts

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

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

ولكن هذا لم يكن مفيدًا عند استخدام توجيه [formGroup] من مكون تمت إضافته في وحدة نمطية أخرى ، على سبيل المثال استخدام [formGroup] في author.component.ts المشترك في ملف author.module.ts:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { AuthorComponent } from './author.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    AuthorComponent,
  ],
  providers: [...]
})

export class AuthorModule {}

ظننت أنني إذا أضفت ReactiveFormsModule في app.module.ts ، فسيتم وراثة ReactiveFormsModule افتراضيًا بواسطة جميع وحدات الأطفال التابعة لها مثل author.module في هذه الحالة ... (خطأ!). كنت بحاجة إلى استيراد ReactiveFormsModule في author.module.ts من أجل جعل جميع التوجيهات للعمل:

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

@NgModule({
  imports: [
    ...,
    FormsModule,    //added here too
    ReactiveFormsModule //added here too
  ],
  declarations: [...],
  providers: [...]
})

export class AuthorModule {}

لذلك ، إذا كنت تستخدم وحدات فرعية ، فتأكد من استيراد ReactiveFormsModule في كل ملف وحدة فرعية. آمل أن يكون هذا يساعد أي شخص.


كان لدي نفس المشكلة مع الزاوي 7. فقط استيراد التالية في ملف app.module.ts الخاص بك.

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

ثم أضف FormsModule و ReactiveFormsModule إلى صفيف الواردات الخاصة بك.

imports: [
  FormsModule,
  ReactiveFormsModule
],

كنت أواجه هذا الخطأ عند محاولة إجراء اختبار e2e وكان يدفعني إلى الجنون أنه لم تكن هناك إجابات على ذلك.

إذا كنت تجري اختبارًا ، فابحث عن ملف * .specs.ts وأضف:

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

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


لم تنجح الإجابة المقترحة مع Angular 4. بدلاً من ذلك ، كان علي استخدام طريقة أخرى لربط السمة مع بادئة attr :

<element [attr.attribute-to-bind]="someValue">

RC5 FIX

تحتاج إلى import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' في وحدة التحكم الخاصة بك وإضافته إلى directives في @Component . سيؤدي ذلك إلى حل المشكلة.

بعد إصلاح ذلك ، من المحتمل أن تحصل على خطأ آخر لأنك لم تقم بإضافة formControlName="name" إلى المدخلات الخاصة بك في النموذج.

RC6 / RC7 / الإصدار النهائي FIX

لإصلاح هذا الخطأ ، تحتاج فقط إلى استيراد ReactiveFormsModule من @angular/forms في الوحدة النمطية الخاصة بك. فيما يلي مثال على وحدة نمطية أساسية مع استيراد ReactiveFormsModule :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

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

export class AppModule { }

لمزيد من التوضيح ، يعد formGroup محددًا للتوجيه المسمى FormGroupDirective والذي يعد جزءًا من ReactiveFormsModule ، ومن هنا FormGroupDirective الحاجة إلى استيراده. يتم استخدامه لربط FormGroup موجود FormGroup DOM. يمكنك قراءة المزيد عنها في صفحة مستندات Angular الرسمية .


ملاحظة صغيرة: كن حذرًا بشأن اللودرات وتقليل (Rails env.):

بعد رؤية هذا الخطأ ومحاولة كل حل هناك ، أدركت وجود خطأ في برنامج html الخاص بي.

لقد قمت بضبط بيئة Rails لاستيراد مسارات HTML للمكونات الخاصة بي بنجاح مع هذا المُحمل ( config/loaders/html.js. ):

module.exports = {
  test: /\.html$/,
  use: [ {
    loader: 'html-loader?exportAsEs6Default',
    options: {
      minimize: true
    }
  }]
}

بعد عدة ساعات من الجهود وعدد لا يحصى من واردات ReactiveFormsModule ، رأيت أن formGroup بي كان formGroup عن حروف صغيرة: formgroup .

هذا قادني إلى المحمل وحقيقة أنه خفضت بلدي HTML على الحد.

بعد تغيير الخيارات ، كان كل شيء يعمل كما ينبغي ، ويمكنني العودة إلى البكاء مرة أخرى.

أعلم أن هذه ليست إجابة على السؤال ، لكن بالنسبة لزائري Rails في المستقبل (وغيرهم من عمال التحميل المخصصين) أعتقد أن هذا قد يكون مفيدًا.





angular2-forms