'ফর্মগ্রুপ' তে আবদ্ধ হতে পারে না কারণ এটি 'ফর্ম' এর পরিচিত সম্পত্তি নয়


804

পরিস্থিতি:

সাহায্য করুন! আমি আমার Angular2 অ্যাপ্লিকেশনটিতে খুব সাধারণ ফর্মটি কী হওয়া উচিত তা তৈরি করার চেষ্টা করছি তবে তা কখনই কার্যকর হয় না তা বিবেচনা করুন।

অ্যাঙ্গুলার সংস্করণ:

কৌণিক 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 { }

প্রশ্নটি:

আমি কেন ত্রুটি পাচ্ছি?

আমি কিছু অনুপস্থিত করছি?

উত্তর:


1409

আরসি 5 ফিক্স

আপনাকে করার প্রয়োজন import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'আপনার নিয়ামক মধ্যে এবং এটি যোগ directivesমধ্যে @Component। এটি সমস্যার সমাধান করবে।

আপনি এটি ঠিক করার পরে, আপনি সম্ভবত অন্য একটি ত্রুটি পাবেন কারণ আপনি formControlName="name"নিজের ইনপুটটিকে ফর্মটিতে যুক্ত করেননি ।

আরসি 6 / আরসি 7 / ফাইনাল রিলিজ এফআইএক্স

এই ত্রুটিটি ঠিক করতে, আপনাকে কেবলমাত্র আপনার মডিউল ReactiveFormsModuleথেকে আমদানি করতে হবে @angular/formsReactiveFormsModuleআমদানি সহ একটি বেসিক মডিউলটির উদাহরণ এখানে :

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, তাই এটি আমদানি করা দরকার। এটি একটি বিদ্যমান FormGroupডিওএম উপাদানকে আবদ্ধ করতে ব্যবহৃত হয় । আপনি এংগুলারের অফিসিয়াল ডক্স পৃষ্ঠায় এ সম্পর্কে আরও পড়তে পারেন ।


13
আমি যা পাই না তা হ'ল যদি ফর্মস মডেলটি অ্যাপ্লিকেশনটির মধ্যে আমদানি করা হচ্ছে তবে REACTIVE_FORM_DIRECTIVES টি যুক্ত করা দরকার। মডিউলগুলির সম্পূর্ণ বিন্দুটি উপাদানগুলির অভ্যন্তরে নির্দেশনা ঘোষণা করা এড়ানো avoid
ড্যানিয়েল প্লিসকি

19
@ ড্যানিয়েলপ্লিসকি আপনি সম্পূর্ণরূপে ঠিক বলেছেন, আমি সবেমাত্র জানতে পেরেছিলাম যে তারা আজ প্রকাশিত আরসি 6 সংস্করণে এই সমস্যাটি সমাধান করেছেন। এখন আপনার এটি করার দরকার নেই, আপনাকে কেবল আমদানি করতে হবে FormsModuleএবং ReactiveFormsModule। আমি আমার উত্তর সম্পাদনা করব।
স্টিফান স্ব্রকোটা

12
রাজ্যগুলির মধ্যে মডিউলগুলির সাথে অলস লোড দেওয়ার জন্য আমি আমার লগইন ফর্মের জন্য একটি পৃথক মডিউল তৈরি করেছি তা ভুলে যাওয়ার একটি ঘন্টা আমি হারিয়ে ফেলেছি। (আমি এ 2 তে নতুন, এখনও এ 1 পছন্দ করি) দয়া করে নিশ্চিত করুন যে আপনি সঠিক মডিউলটি ব্যবহার করেছেন! আমার মতো ছোঁয়াছুড়ি হবেন না। আপনাকে আর উপাদানটিতে যুক্ত করার দরকার নেই। আপনার মডিউলটিতে আমদানি যথেষ্ট। ধন্যবাদ
ব্যবহারকারী 1889992

4
ধন্যবাদ, আমার জন্য কাজ করেছেন। আমি বিভ্রান্ত হয়ে পড়েছি কেন এঙ্গুলার 2-তে ফর্মকন্ট্রোলগুলির গাইডগুলিতে এটি উল্লেখ করা হয়নি যে আমি হোঁচট
খেয়েছি

1
কৌনিক 4 এ আমি ReactiveFormsModuleসরবরাহকারীর তালিকায় যুক্ত হয়েছি এবং এটি কাজ করেছে। আপনি যদি এটি করার কথা ভাবেন তবে এটি নিশ্চিত নয়।
ব্রুনোএলএম

150

বৈশিষ্ট্য মডিউলগুলির সাথে মিলিয়ে কৌণিক 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 { } 

121

ঠিক আছে কিছু খননের পরে আমি "ফর্মগ্রুপের সাথে আবদ্ধ হতে পারি না কারণ এটি 'ফর্ম' এর পরিচিত সম্পত্তি নয়" "

আমার ক্ষেত্রে, আমি একাধিক মডিউল ফাইল ব্যবহার করে আসছি, আমি অ্যাপ.মডিউল.টসে রিএ্যাকটিভফর্মস মোডিয়ুল যুক্ত করেছি

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

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

আমি যখন অন্য একটি মডিউলে যুক্ত উপাদান থেকে একটি [ফর্মগ্রুপ] নির্দেশনা ব্যবহার করি তবে এটি কাজ করে না, উদাহরণস্বরূপ, লেখক.মডিউল.এনএস ফাইলে সাবস্ক্রাইব হওয়া লেখক.কম্পলেট.টিসে [ফর্মগ্রুপ] ব্যবহার করে:

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- এ Reactive FormsModule যুক্ত করি তবে ডিফল্টরূপে Reactive FormsModule এর ক্ষেত্রে শিশুদের সমস্ত মডিউল লেখক.মডুলের মতো উত্তরাধিকার সূত্রে প্রাপ্ত হবে ... (ভুল!) কাজ করার সমস্ত দিকনির্দেশনা তৈরি করার জন্য লেখক.মডিউল.টসগুলিতে আমার রিএ্যাকটিভফর্মস মডেলটি আমদানি করা দরকার:

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

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

export class AuthorModule {}

সুতরাং, আপনি যদি সাবমডিউলগুলি ব্যবহার করছেন তবে প্রতিটি সাবমডিউল ফাইলে রিএ্যাকটিভ ফর্মস মোডিয়ুলটি আমদানি করতে ভুলবেন না। আশা করি এটি যে কাউকে সাহায্য করবে।


1
আমার জন্য কাজ করে, ঠিক একই সমস্যা, আমি সত্যিই ভেবেছিলাম রফতানির অ্যারেতে মডিউলগুলি শিশুদের মডিউল দ্বারা উত্তরাধিকার সূত্রে প্রাপ্ত হবে ... জানেন না ঠিক কেন! সম্পাদনা: ডকুমেন্টেশন বলছে রফতানি হ'ল যে কোনও উপাদান ()
777

51

কোনও উপাদানটির ইউনিট পরীক্ষার সময় আমি এই ত্রুটির মুখোমুখি হয়েছি (কেবল পরীক্ষার সময়, প্রয়োগের মধ্যে এটি সাধারণত কাজ করে)। সমাধানটি ফাইলটিতে আমদানি 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();
    }));
});

24

এর পরিবর্তে আমি অন্য উপায় ব্যবহার ছিল প্রস্তাবিত উত্তর কৌণিক 4. আমার জন্য কাজ না করে অ্যাট্রিবিউট বাঁধাই সঙ্গে attrউপসর্গ:

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

3
হেই মানুষ! আপনি কি নিশ্চিত যে আপনার উত্তর প্রশ্নের সাথে সম্পর্কিত? :) প্রশ্নটি একটি ফর্ম স্থাপনের বিষয়ে ছিল - এনজিডমুলিটি সঠিকভাবে স্থাপন না করে কারণ
ফ্রান্সেসকোমুসি ২

1
পছন্দ করুন একই পরিস্থিতি, একই ত্রুটি বার্তা।
Str

2
এটি আমার পক্ষে কাজ করেছিল, তবে অদ্ভুত - আমার কেন দরকার attr.?
কোডিবাগস্টিন

অসংখ্য ধন্যবাদ. এটি আমার পক্ষেও কাজ করেছিল, তবে আমি ভাবব যে সমস্যাটি ট্রিগার করার মতো আরও কিছু থাকতে হবে, যেমন লাইব্রেরির সংস্করণ বা <ফর্ম> ট্যাগ অবস্থান নির্ধারণ? স্ট্রেঞ্জ।
মেমিটিকান

এটি খুঁজে পেল- সমস্যাটি হ'ল আমাকে ReactiveFormsModuleসরাসরি আমার পৃষ্ঠাতে আমদানি করা দরকার .module.ts। নয় .page.ts... একবার এটি করার পরে, আমার টেম্পলেটটি উপসর্গ formGroupছাড়াই, গুণটি সঠিকভাবে সনাক্ত করতে পারে attr.
মেমিটিকান

19

যদি আপনাকে দুটি মডিউল আমদানি করতে হয় তবে নীচের মতো এটি যুক্ত করুন

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

14

মনে রাখবেন যে আপনি যদি "ফিচার মডিউলগুলি" সংজ্ঞায়িত করেন তবে আপনাকে ফিচার মডিউলটি আমদানি করতে হবে, এমনকি আপনি ইতিমধ্যে আমদানি করে থাকলেও AppModule। কৌণিক ডকুমেন্টেশন থেকে:

মডিউলগুলি অন্যান্য মডিউলগুলিতে ঘোষিত উপাদানগুলি, নির্দেশাবলী বা পাইপগুলিতে অ্যাক্সেসের উত্তরাধিকারী হয় না। অ্যাপমোডুল যা আমদানি করে তা কন্টাক্টমোডুলের সাথে অপ্রাসঙ্গিক এবং এর বিপরীতে। কন্টাক্ট কম্পোনেন্টটি [(ngModel)] এর সাথে আবদ্ধ হওয়ার আগে, তার পরিচিতি মডেলটি অবশ্যই ফর্মস মডেল আমদানি করতে পারে।

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


14

ত্রুটিটি বলে যে ফর্মগ্রুপটি এই মডিউলে স্বীকৃত নয়। সুতরাং আপনাকে ফর্মগ্রুপ ব্যবহার করে এমন প্রতিটি মডিউলগুলিতে এই (নীচে) মডিউলগুলি আমদানি করতে হবে

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

তারপর আপনার মধ্যে FormsModule এবং ReactiveFormsModule যোগ মডিউল এর আমদানির অ্যারে।

imports: [
  FormsModule,
  ReactiveFormsModule
],

আপনি ভাবছেন যে আমি এটি ইতিমধ্যে অ্যাপমোডুলে যুক্ত করেছি এবং এটি থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হওয়া উচিত? তবে তা নয়। কারণ এই মডিউলগুলি প্রয়োজনীয় নির্দেশিকা রফতানি করে যা কেবলমাত্র মডিউল আমদানিতে পাওয়া যায়। এখানে আরও পড়ুন ... https://angular.io/guide/sharing-ngmodules

এই ত্রুটিগুলির জন্য অন্যান্য কারণগুলি নীচের মতো বানান ত্রুটি হতে পারে ...

[ফর্মগ্রুপ] = "ফর্ম" ছোট চ এর পরিবর্তে মূলধন এফ

[formGroup] = "ফর্ম" ফর্মের পরে অতিরিক্ত গুলি


13

আমার কৌনিক 7.. এর সাথে আমার একই সমস্যা ছিল Just

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

তারপরে আপনার আমদানির অ্যারেতে ফর্মসমডুল এবং প্রতিক্রিয়াশীল ফর্মগুলি মডুলেল যুক্ত করুন।

imports: [
  FormsModule,
  ReactiveFormsModule
],

1
এটি আমার পক্ষে অ্যাঙ্গুলাট 7. এ কাজ করে না
র‌্যাফএল

9

এই সমস্যাটি ফর্মস মোডুল, রিএ্যাকটিভ ফর্মস মোডুলের আমদানি হারিয়ে যাওয়ার কারণে ঘটে থাকে I আমার কেস আলাদা ছিল। যেহেতু আমি মডিউলগুলির সাথে কাজ করছিলাম o সুতরাং আমি আমার পিতামাতার মডিউলগুলির উপরের আমদানিগুলি মিস করেছি যদিও আমি এটি শিশু মডিউলগুলিতে আমদানি করেছি, এটি কাজ করছে না।

তারপরে আমি এটি নীচে হিসাবে আমার পিতামাতার মডিউলগুলিতে আমদানি করেছি এবং এটি কার্যকর হয়েছে!

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

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

7

লোকেদের জন্য এই ত্রুটিটি সম্পর্কে এই থ্রেডগুলি ট্রল করছে। আমার ক্ষেত্রে আমার একটি ভাগ করা মডিউল ছিল যেখানে আমি কেবল ফর্মসমডুল এবং প্রতিক্রিয়াশীল ফর্মগুলি মডেলটি রফতানি করেছি এবং এটিকে আমদানি করতে ভুলে গিয়েছি। এর ফলে একটি অদ্ভুত ত্রুটি ঘটেছে যে ফর্মগ্রুপগুলি সাব উপাদানগুলিতে কাজ করছে না। আশা করি এটি লোকেদের মাথা আঁচড়াতে সহায়তা করে।


7

E2e টেস্টিং করার চেষ্টা করার সময় আমি এই ত্রুটিটি অতিক্রম করছিলাম এবং এটি আমাকে পাগল করে দিচ্ছিল যে এর কোনও উত্তর নেই।

যদি আপনি পরীক্ষা নিরীক্ষা করছেন , আপনার * .specs.ts ফাইলটি সন্ধান করুন এবং যুক্ত করুন:

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

5

একটি ছোট্ট নোট: লোডার সম্পর্কে সতর্কতা অবলম্বন করুন এবং ন্যূনতম করুন (রিয়েল এনভ।):

এই ত্রুটিটি দেখার পরে এবং সেখানে প্রতিটি সমাধান চেষ্টা করার পরে, আমি বুঝতে পেরেছিলাম যে আমার এইচটিএমএল লোডারটিতে কিছু ভুল ছিল।

এই লোডারটি ( config/loaders/html.js.) দিয়ে সফলভাবে আমার উপাদানগুলির জন্য এইচটিএমএল পাথ আমদানি করার জন্য আমি আমার রেল পরিবেশ সেট আপ করেছি :

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

কয়েক ঘন্টার প্রয়াস ও ReactiveFormsModule আমদানির অগণিত এরপর আমি দেখলাম যে আমার formGroupছোট হাতের অক্ষর ছিল: formgroup

এটি আমাকে লোডার এবং এই সত্যটি আমার এইচটিএমএলকে ন্যূনতম করতে হ্রাস করেছে তার দিকে পরিচালিত করেছিল।

বিকল্পগুলি পরিবর্তনের পরে, সবকিছু যেমনটি করা উচিত ঠিক তেমন কাজ করেছিল এবং আমি আবার কান্নায় ফিরে যেতে পারি।

আমি জানি যে এটি প্রশ্নের উত্তর নয়, তবে ভবিষ্যতের রেল দর্শকদের জন্য (এবং কাস্টম লোডার সহ অন্যান্য) আমি মনে করি এটি সহায়ক হতে পারে।


5

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

5

আপনি যখন কোনও উপাদান বিকাশ করার সময় যদি আপনার এই সমস্যাটি থাকে তবে আপনার নিকটতম মডিউলে এই দুটি মডিউল যুক্ত করা উচিত:

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


5

সহজ সমাধান:

পদক্ষেপ 1: ReactiveFormModule আমদানি করুন

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

পদক্ষেপ 2: বিভাগটি আমদানি করতে "রিএ্যাকটিভফর্মস মোডুল" যুক্ত করুন

imports: [

    ReactiveFormsModule
  ]

পদক্ষেপ 3: অ্যাপ্লিকেশনটি আবার শুরু করুন one

উদাহরণ:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import { EscalationManagementRoutingModule } from './escalation-management-routing.module';
import { EscalationManagementRouteWrapperComponent } from './escalation-management-route-wrapper.component';


@NgModule({
  declarations: [EscalationManagementRouteWrapperComponent],
  imports: [
    CommonModule,
    EscalationManagementRoutingModule,
    ReactiveFormsModule
  ]
})
export class EscalationManagementModule { }

4

আপনার app.module.ts এ Reactive formsModule আমদানি করুন এবং নিবন্ধ করুন।

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

@NgModule({
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe

],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

আপনার বানানটি .ts এবং .html উভয় ফাইলেই সঠিক কিনা তা নিশ্চিত করুন। xxx.ts

  profileForm = new FormGroup({
  firstName: new FormControl(''),
 lastName: new FormControl('')
 });

xxx.html ফাইল-

  <form [formGroup]="profileForm"> 
  <label>
  First Name:
   <input type="text" formControlName = "firstName">
  </label>

  <label>
  Last Name:
   <input type="text" formControlName = "lastName">
   </label>
   </form>

আমি ভুল করে [ফর্মগ্রুপ] লিখেছিলাম [ফর্মগ্রুপ] এর অন্তর্ভুক্ত। Html এ আপনার বানানটি সঠিকভাবে পরীক্ষা করুন। এটি html ফাইলে কিছু ভুল হলে সংকলন সময় ত্রুটি ফেলে দেয় না।


1
আমি একই ভুল করে!! অনেক ধন্যবাদ. এইচটিএমএলে আমার [ফর্মগ্রুপ] ছিল না [ফর্মগ্রুপ]
টনি

সাহায্য করার জন্য ধন্যবাদ.
ডিবিয়া রঞ্জন ত্রিপাঠী

4

দ্রষ্টব্য : আপনি যদি চাইল্ড মডিউলটির উপাদানগুলির মধ্যে কাজ করছেন, তবে আপনাকে কেবল পিতামাতার অ্যাপ্লিকেশন রুট মডিউলটির পরিবর্তে শিশু মডিউলে Reactive FormsModule আমদানি করতে হবে


4

আমার মতো বোবা বোবা হবেন না। উপরের মতো একই ত্রুটি পাচ্ছিল, এই থ্রেডের বিকল্পগুলির মধ্যে কোনওটিই কাজ করেছিল না। তারপরে আমি বুঝতে পেরেছিলাম যে আমি ফর্মগ্রুপে 'এফ' কে বড় করে আছি। ডোহ!

পরিবর্তে:

[FormGroup]="form"

না:

[formGroup]="form"


1
এখানে একই সমস্যা
গ্রেগ

3

এটি যদি কেবল একটি টাইপস্ক্রিপ্ট ত্রুটি হয় তবে আপনার ফর্মের সমস্ত কিছু কাজ করে তবে আপনাকে কেবল আপনার আইডিই পুনরায় চালু করতে হবে


3

আমি, নিশ্চিত করুন যে ব্যবহার করা হয় তবে করতে একই সমস্যা ছিল submodules , (উদাহরণস্বরূপ, যদি আপনি না শুধুমাত্র app.component.module.ts আছে কিন্তু আপনি login.module.ts হিসাবে একটি পৃথক উপাদান যেমন আছে, যে আপনি এই মধ্যে ReactiveFormsModule আমদানি অন্তর্ভুক্ত লগইন এটির কাজ করার জন্য। Module.ts আমদানি করুন I আমার অ্যাপ.কম্পোনাল.মোডিয়ালে আমার Reactive formsModuleও আমদানি করতে হবে না কারণ আমি সব কিছুর জন্য সাবমডিউল ব্যবহার করছি।

login.module.ts:

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

import { IonicModule } from '@ionic/angular';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

3

কাউকে সাহায্য করতে পারে:

যখন আপনার কোনও মডেলের একটি ফর্মগ্রুপ রয়েছে (এন্ট্রি কম্পোনামেন্ট), তখন আপনাকে মডিউলটি ইনস্টল করা হয় এমন মডিউলটিতেও রিঅ্যাকটিভ ফর্মস মড্যুলি আমদানি করতে হবে।


2

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

এর মানে হল যে আপনি কৌণিক ( [prop]) ব্যবহার করে কোনও সম্পত্তি বাঁধতে চেষ্টা করেছেন তবে কৌনিক ক্যান্সারটি সেই উপাদানটির জন্য তিনি কিছু জানেন না (এই ক্ষেত্রেform )।

এটি সঠিক মডিউলটি ব্যবহার না করে (পথে কোথাও কোনও আমদানি অনুপস্থিত) ব্যবহার না করে এবং কখনও কখনও কেবল টাইপের কারণ হতে পারে:

[formsGroup]সঙ্গে sপরেform


0

আমার সমাধানটি সূক্ষ্ম ছিল এবং আমি এটি ইতিমধ্যে তালিকাভুক্ত দেখতে পাইনি।

আমি একটি কৌণিক পদার্থ ডায়ালগ উপাদানটিতে প্রতিক্রিয়াশীল ফর্মগুলি ব্যবহার করছিলাম যা ঘোষিত হয়নি app.module.ts। মূল উপাদানটি ঘোষিত হয়েছিল app.module.tsএবং ডায়ালগ উপাদানটি খুলবে তবে ডায়ালগ উপাদানটি স্পষ্টভাবে ঘোষণা করা হয়নি app.module.ts

সাধারণত ডায়ালগ উপাদানটি ব্যবহার করতে আমার কোনও সমস্যা হয়নি তবে আমি যখনই ডায়ালগটি খুলি তখন ফর্মটি এই ত্রুটিটি ছুঁড়েছে।

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


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.