angular - इसे 'फ़ॉर्मग्रुप' से नहीं बांध सकते क्योंकि यह 'फ़ॉर्म' की ज्ञात संपत्ति नहीं है




typescript angular2-forms (12)

FormsModule, ReactiveFormsModule .I के आयात के गुम होने के कारण यह समस्या आती है। मैं भी यही समस्या लेकर आया था। मेरा मामला अलग था। जैसा कि मैं मॉड्यूल के साथ काम कर रहा था। क्या मैं अपने माता-पिता के मॉड्यूल में आयात से ऊपर चूक गया, हालांकि मैंने इसे बाल मॉड्यूल में आयात किया था, यह काम नहीं कर रहा था।

तब मैंने इसे अपने मूल मॉड्यूल में नीचे की तरह आयात किया, और यह काम कर गया!

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

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

स्थिति:

कृपया सहायता कीजिए! मैं अपने Angular2 ऐप में एक बहुत ही सरल रूप बनाने की कोशिश कर रहा हूं, लेकिन कोई फर्क नहीं पड़ता कि यह कभी भी काम नहीं करता है।

ANGULAR संस्करण:

कोणीय 2.0.0 आरसी 5

त्रुटि:

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

}

एनकाउंटर:

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 {ReactiveFormsModule,FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponentComponent,
    BlogComponentComponent,
    ContactComponentComponent,
    HeaderComponentComponent,
    FooterComponentComponent,
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

इस त्रुटि के बारे में इन थ्रेड्स को टहल रहे लोगों के लिए। मेरे मामले में मेरे पास एक साझा मॉड्यूल था, जहां मैंने केवल FormsModule और ReactiveFormsModule का निर्यात किया था और इसे आयात करना भूल गया था। इससे एक अजीब त्रुटि हुई कि उपसमूह में उपसमूह काम नहीं कर रहे थे। आशा है कि इससे लोगों को अपना सिर खुजाने में मदद मिलेगी।


एक बार जब मैंने अपने मॉड्यूल को AppModule में AppModule सब कुछ ठीक काम करने लगा।


ठीक है, कुछ खुदाई के बाद मुझे "फॉर्मग्रुप 'के लिए बाध्य नहीं किया जा सकता क्योंकि यह' '' की ज्ञात संपत्ति नहीं है।"

मेरे मामले के लिए, मैं कई मॉड्यूल फ़ाइलों का उपयोग कर रहा हूं, मैंने app.module.ts में ReactiveFormsModule जोड़ा है

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

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

लेकिन यह तब काम नहीं कर रहा था जब मैं एक अन्य मॉड्यूल में जोड़े गए घटक से एक [फॉर्मग्रुप] निर्देश का उपयोग करता हूं, उदाहरण के लिए [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 {}

मुझे लगता है कि अगर मैंने app.module.ts में ReactiveFormsModule को जोड़ दिया, तो डिफ़ॉल्ट रूप से ReactiveFormsModule को इस मामले में author.module की तरह इसके सभी बच्चों के मॉड्यूल विरासत में मिलेंगे ... (गलत!)। काम करने के लिए सभी निर्देश बनाने के लिए मुझे author.module.ts में ReactiveFormsModule को आयात करने की आवश्यकता है:

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

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

export class AuthorModule {}

इसलिए, यदि आप सबमॉड्यूल्स का उपयोग कर रहे हैं, तो प्रत्येक सबमॉड्यूल फ़ाइल में ReactiveFormsModule का आयात करना सुनिश्चित करें। आशा है कि यह किसी को भी मदद करता है।


ध्यान रखें कि यदि आपने "फ़ीचर मॉड्यूल" को परिभाषित किया है, तो आपको फ़ीचर मॉड्यूल में आयात करने की आवश्यकता होगी, भले ही आप पहले से ही AppModule आयात किए गए AppModule । कोणीय दस्तावेज से:

मॉड्यूल अन्य घटकों में घोषित किए गए घटकों, निर्देशों, या पाइपों तक पहुंच प्राप्त नहीं करते हैं। क्या AppModule आयात ContactModule और इसके विपरीत के लिए अप्रासंगिक है। ContactComponent को [(ngModel)] के साथ बाँधने से पहले, इसके ContactModule को FormsModule को आयात करना होगा।

https://angular.io/docs/ts/latest/guide/ngmodule.html


मुझे एक घटक की इकाई परीक्षण के दौरान इस त्रुटि का सामना करना पड़ा है (केवल परीक्षण के दौरान, आवेदन के भीतर यह सामान्य रूप से काम करता है)। समाधान को .spec.ts फ़ाइल में ReactiveFormsModule आयात .spec.ts है:

// Import module
import { ReactiveFormsModule } from '@angular/forms';

describe('MyComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            imports: [ReactiveFormsModule],  // Also add it to 'imports' array
        })
        .compileComponents();
    }));
});

मेरे जैसा गूंगा मत बनो। ऊपर के रूप में एक ही त्रुटि हो रही थी, इस धागे में विकल्पों में से किसी ने भी काम नहीं किया। तब मुझे एहसास हुआ कि मैंने फॉर्मग्रुप में 'एफ' को कैपिटल में रखा है। रवींद्र!

 [FormGroup]="form" 

सुझाए गए उत्तर ने मुझे कोणीय 4 के साथ काम नहीं किया। इसके बजाय मुझे attr प्रीफिक्स के साथ विशेषता बाइंडिंग के दूसरे तरीके का उपयोग करना पड़ा:

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

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

इसका मतलब है कि आप कोणीय ( [prop] ) का उपयोग करके एक संपत्ति को बांधने की कोशिश करते हैं, लेकिन कोणीय कठबोली कुछ भी वह उस तत्व के लिए जानता है (इस मामले में form )।

यह सही मॉड्यूल का उपयोग नहीं करने से हो सकता है (रास्ते में कहीं आयात लापता) और कभी-कभी बस एक टाइपो का कारण बनता है:

[formsGroup] , form बाद s साथ


RC5 FIX

आपको अपने नियंत्रक में import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' और इसे @Component में directives में @Component । वह समस्या को ठीक कर देगा।

आपके द्वारा ठीक करने के बाद, आपको संभवतः एक और त्रुटि मिलेगी क्योंकि आपने अपने इनपुट में formControlName="name" नहीं जोड़ा था।

RC6 / RC7 / अंतिम रिलीज़ FIX

इस त्रुटि को ठीक करने के लिए, आपको बस अपने मॉड्यूल में @angular/forms से ReactiveFormsModule आयात करना होगा। यहाँ 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 नाम के निर्देश के लिए एक चयनकर्ता है, जो कि ReactiveFormsModule का एक हिस्सा है, इसलिए इसे आयात करने की आवश्यकता है। इसका उपयोग मौजूदा FormGroup को DOM तत्व से बांधने के लिए किया जाता है। आप इसके बारे में अधिक कोणीय के आधिकारिक डॉक्स पृष्ठ पर पढ़ सकते हैं।


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






angular2-forms