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




typescript angular2-forms (12)

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

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

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

পরিস্থিতি:

সাহায্য করুন! আমি আমার 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 { }

প্রশ্নটি:

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

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


অ্যাঙ্গুলার 7.. এর সাথে আমার একই সমস্যা ছিল your

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],

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

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

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

 [FormGroup]="form" 

একবার আমি আমার মডিউলটি AppModule করার AppModule সবকিছু ঠিকঠাক কাজ শুরু করে।


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

প্রস্তাবিত উত্তরটি কৌণিক 4 সহ আমার পক্ষে কাজ করে নি Instead পরিবর্তে আমাকে অ্যাট্রি উপসর্গের সাথে attr আরও একটি উপায় ব্যবহার করতে হয়েছিল:

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

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

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

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


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


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

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

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

[formsGroup] , form পরে s


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 { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' করতে হবে এবং এটি import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' @Component directives যুক্ত করতে হবে। সমস্যা সমাধান করবে।

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

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

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





angular2-forms