forms - কৌণিক 2: 'এনজি মডেল'-এ আবদ্ধ হতে পারে না কারণ এটি' ইনপুট 'এর পরিচিত সম্পত্তি নয়




angular angular2-template (10)

আমি কৌণিক 2 তে ডায়নামিক ফর্মগুলি বাস্তবায়নের চেষ্টা করছি I've আমি এই ডকুমেন্টেশনটি অনুসরণ করেছি: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

আমি কোডে কিছু পরিবর্তন করেছি। আমি এখানে ত্রুটি পাচ্ছি।

এই ত্রুটিটি আমি কীভাবে করব?

আপনি এখানে পুরো কোডটি সন্ধান করতে পারেন: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview , যা আমার স্থানীয় সিস্টেমে নয় বরং প্লানকারে কাজ করছে।

এইচটিএমএল কোড:

<div>
  <form [formGroup]="form">

    <div *ngFor="let question of questions" class="form-row">
      <label [attr.for]="question.key">{{question.label}}</label>

  <div [ngSwitch]="question.controlType">

    <input *ngSwitchCase="'textbox'" [formControlName]="question.key"
            [id]="question.key" [type]="question.type" [(ngModel)]="question.value">

    <select [id]="question.key" [(ngModel)]="question.value" *ngSwitchCase="'dropdown'" [formControlName]="question.key" >
      <option *ngFor="let opt of question.options" [ngValue]="opt.key" >{{opt.value}}</option>
    </select>

    <input *ngSwitchCase="'checkbox'"  [(ngModel)]="question.value"
            [id]="question.key" [type]="question.type" (change)="question.value = ck.checked" #ck [ngModelOptions]="{standalone: true}">

  </div> 
  <div class="errorMessage" *ngIf="!form.controls[question.key].valid">{{question.label}} is required</div>
    </div>

    <div class="form-row">
      <button type="submit" [disabled]="!form.valid" (click)="onSubmit()">Save</button>
      <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
      <button type="button" class="btn btn-default" (click)="clear()">Clear</button>

    </div>
  </form>

  <div *ngIf="payLoad" class="form-row">
    <strong>Saved the following values</strong><br>{{payLoad}}
  </div>
</div>

উপাদান কোড:

import { Component, Input, OnInit }  from '@angular/core';
import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { QuestionBase }                 from './question-base';
import { QuestionControlService }       from './question-control.service';
import { ControlGroup }     from '@angular/common';
import {ChangeDetectorRef} from '@angular/core';
import { FormsModule }   from '@angular/forms';

@Component({
  selector: 'dynamic-form',
  templateUrl: 'app/dynamicform/form.component.html',
  directives: [REACTIVE_FORM_DIRECTIVES],
  providers:  [QuestionControlService]
})
export class DynamicFormComponent implements OnInit {

  @Input() questions: QuestionBase<any>[] = [];
  form: FormGroup;
  payLoad:any;
  payLoad2:any;
  questiont: QuestionBase<any>;
  questiond: QuestionBase<any>;
  constructor(private qcs: QuestionControlService, private cdr: ChangeDetectorRef) {  }
  ngOnInit() {
    this.form = this.qcs.toFormGroup(this.questions);
    console.log("Form Init",this.questions);
    this.questiont = JSON.parse(JSON.stringify(this.questions));
    this.questiond = JSON.parse(JSON.stringify(this.questions));
  }
  onSubmit() {
    this.payLoad = JSON.stringify(this.form.value);
    this.payLoad2=this.payLoad;
    this.questiont = JSON.parse(JSON.stringify(this.questions));
    console.log("Submitted data",this.questions);
  }
  cancel(){
    console.log("Canceled");
    this.questions = JSON.parse(JSON.stringify(this.questiont));
  }
  clear(){
    this.questions = JSON.parse(JSON.stringify(this.questiond));
    this.questiont = JSON.parse(JSON.stringify(this.questiond));
    console.log("Cleared");
    this.cdr.detectChanges();
  }
}

অনুসরণ করার পদক্ষেপ

1. আপনার app.module.ts ফাইলটি খুলুন।

2. import { FormsModule } from '@angular/forms'; Add যুক্ত করুন import { FormsModule } from '@angular/forms';

৩. imports হিসাবে imports: [ BrowserModule, FormsModule ], FormsModule করুন imports: [ BrowserModule, FormsModule ],

চূড়ান্ত ফলাফলটি এর মতো দেখবে

.....
import { FormsModule } from '@angular/forms';
.....
@NgModule({
.....
  imports: [   
     BrowserModule, FormsModule 
  ],
.....
})

অ্যাঙ্গুলার 6-এ কোনও কারণে কেবল ফর্মস মডেল আমদানি করা আমার সমস্যার সমাধান করে নি। পরিশেষে আমার সমস্যাটি সংশোধন করে তা যুক্ত করে

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
})

export class MyClass{
}

আপনাকে আপনার @ এনজিএমডিউল ডেকরেটারে ফর্মস মোডুল আমদানি করতে হবে, @ এনজিএমডিউল আপনার মডিউলনাম.মডিউল.টস ফাইলটিতে উপস্থিত রয়েছে।

import { FormsModule } from '@angular/forms';
@NgModule({
   imports: [
      BrowserModule,
      FormsModule
   ],
   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

আপনার নিজের মডিউলে @ কৌনিক / ফর্ম নির্ভরতা আমদানি করতে হবে।

আপনি যদি এনপিএম ব্যবহার করেন তবে নির্ভরতা ইনস্টল করুন:

npm install @angular/forms --save

এটি আপনার মডিউলে আমদানি করুন:

import {FormsModule} from '@angular/forms';
@NgModule({
    imports: [.., FormsModule,..],
    declarations: [......],
    bootstrap: [......]
})

এবং যদি আপনি মডিউল লোড করার জন্য সিস্টেমজে ব্যবহার করেন

'@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',

এখন আপনি দুটি উপায়ে ডেটাবাইন্ডিংয়ের জন্য [(ngModel)] ব্যবহার করতে পারেন।


আপনি স্রেফ FormsModule যুক্ত FormsModule এবং আপনার app.module.ts

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

imports: [
    BrowserModule, FormsModule 
],

আপনার app.module.ts কেবল উপরের দুটি লাইন যুক্ত করুন। এটা ঠিক আছে।


আরসি 5 এ আপগ্রেড করার পরে আমি একই ধরণের ত্রুটির মুখোমুখি হয়েছি; অর্থাত্ কৌনিক 2: 'এনজিমোডেল'-এ আবদ্ধ হতে পারে না কারণ এটি' ইনপুট'-এর পরিচিত সম্পত্তি নয়।

প্লাঙ্কারের কোডগুলি আপনাকে Angular2 RC4 ব্যবহার করে দেখায়, তবে https://angular.io/docs/ts/latest/cookbook/dynamic-form.html এর উদাহরণ কোডটি এনজিমোডুল ব্যবহার করছে যা আরসি 5 এর অংশ। এনজিএমডিউলস হ'ল আরসি 4 থেকে আরসি 5 এ ব্রেকিং পরিবর্তন।

এই পৃষ্ঠাটি আরসি 4 থেকে আরসি 5 এ স্থানান্তর সম্পর্কে ব্যাখ্যা করেছে: https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

আমি আশা করি এটি আপনার যে ত্রুটিটি পাচ্ছে তার সমাধান করে এবং আপনাকে সঠিক দিকে যেতে সাহায্য করবে।

সংক্ষেপে, আমাকে app.module.ts এ একটি এনজি মডুলি তৈরি করতে হয়েছিল:

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

import { AppComponent }  from './app.component';

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

আমি তখন মডিউলটি ব্যবহার করতে মেইন.টস পরিবর্তন করেছি:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

অবশ্যই, আমার প্যাকেজ.জসনে নির্ভরতাও আপডেট করার দরকার ছিল। প্যাকেজ.জসন থেকে আমার নির্ভরতা এখানে। স্বীকারোক্তিজনকভাবে, আমি এগুলি অন্য উত্সগুলি থেকে একসাথে আটকে রেখেছি (সম্ভবত এনজি ডক্স উদাহরণ), তাই আপনার মাইলেজটি ভিন্ন হতে পারে:

...
"dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^3.3.6"
  },
...

আমি আশা করি এটি আরও ভালভাবে সহায়তা করে। :-)


দ্রুত সমাধানের সন্ধান করা, আপনার @ এনজিএমডিউল কোডটি আপডেট করুন:

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

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

export class AppModule { }

উত্স: 'এনজি মডেল'-এ আবদ্ধ হতে পারে না কারণ এটি' ইনপুট 'এর পরিচিত সম্পত্তি নয়


প্রথমে কৌণিক lib থেকে এবং এনজিএমডুলের অধীনে ফর্মস মডেলটি আমদানিতে ঘোষণা করে

import { FormsModule } from '@angular/forms';
    @NgModule({
      declarations: [
        AppComponent,
        ],
      imports: [
        BrowserModule,
        FormsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })

আসুন ধরে নেওয়া যাক, আপনার পুরানো অ্যাপ্লিকেশন mod

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

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

export class AppModule { }

এখন আপনার app.module.ts এ ফর্মমডুল আমদানি করুন

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

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

export class AppModule { }

http://jsconfig.com/solution-cant-bind-ngmodel-since-isnt-known-property-input/


import {FormControl,FormGroup} from '@angular/forms';

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

আপনার অনুপস্থিতদেরও যুক্ত করা উচিত।






angular2-forms