'ফর্মকন্ট্রোল'-এ আবদ্ধ হতে পারে না কারণ এটি' ইনপুট'-এর পরিচিত সম্পত্তি নয় - কৌণিক 2 উপাদান স্বয়ংক্রিয়রূপে সমস্যা

Question

আমি আমার কৌণিক 2 প্রকল্পে কৌণিক উপাদান স্বয়ংক্রিয়রূপে উপাদান ব্যবহার করার চেষ্টা করছি । আমি আমার টেম্পলেটটিতে নিম্নলিখিতগুলি যুক্ত করেছি।

<md-input-container>
   <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
   <md-option *ngFor="let state of filteredStates | async" [value]="state">
      {{ state }}
   </md-option>
</md-autocomplete>

নিম্নলিখিত আমার উপাদান হয়।

import {Component, OnInit} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {FormControl} from "@angular/forms";

@Component({
    templateUrl: './edit_item.component.html',
    styleUrls: ['./edit_item.component.scss']
})
export class EditItemComponent implements OnInit {
    stateCtrl: FormControl;
    states = [....some data....];

    constructor(private route: ActivatedRoute, private router: Router) {
        this.stateCtrl = new FormControl();
        this.filteredStates = this.stateCtrl.valueChanges.startWith(null).map(name => this.filterStates(name));
    }
    ngOnInit(): void {
    }
    filterStates(val: string) {
        return val ? this.states.filter((s) => new RegExp(val, 'gi').test(s)) : this.states;
    }
}

আমি নিম্নলিখিত ত্রুটি পাচ্ছি। দেখে মনে হচ্ছে যে formControlনির্দেশটি পাওয়া যাচ্ছে না।

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

এখানে সমস্যা কি?

Comments

Pengyy এর উত্তরে একটি মন্তব্য: ব্যবহার করার সময় formControl, আপনাকে ReactiveFormsModuleআপনার মডিউলটিতে আমদানি করতে হবে , রুটমডুল নয় । আপনি যদি FormControlনিজের বৈশিষ্ট্য মডিউলগুলিতে ব্যবহার করেন তবেই।

— কিং জন

আমার অনুরূপ কেস রয়েছে এবং আমার বৈশিষ্ট্যটিতে রিঅ্যাকটিভ ফরমস মডুলেলের জন্য আমদানি রয়েছে। পার্থক্য কেবলমাত্র আমি 'formControl' এর পরিবর্তে 'formControlName' তে আবদ্ধ করতে চাই। বার্তাটির একই কাঠামো রয়েছে

— 5 Станиславов

এখানে উত্তর সঠিক; তবে যদি এখনও কেউ আটকে থাকে (যেমন আমি ছিলাম) এবং ত্রুটিটি তার formcontrolপরিবর্তে (লোয়ারকেস) বলে formControl- আপনি যদি ওয়েবপ্যাক এইচটিএমএল-লোডার মাধ্যমে টেম্পলেটগুলি চালাচ্ছেন তবে এটি সহায়তা করবে: stackoverflow.com/a/40626329/287568

— বেন বয়ল

Answer 1

ব্যবহার করার সময় formControl, আপনাকে ReactiveFormsModuleআপনার importsঅ্যারেতে আমদানি করতে হবে ।

উদাহরণ:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}

Comments

সত্যিই, কেন এ ডক মধ্যে এই নয় material.angular.io/components/autocomplete/overview অনেক সময় এই জন্য বরবাদ। কৌনিক সহ যেকোন জায়গায় যাদু অজানা নির্ভরতা।

— ভাদোরোয়েস্ট

@ ভ্যাডোরোয়েস্ট: doc দস্তাবেজগুলি উপাদানগুলির জন্য। তারা যদি তারা ব্যবহার করে যে Angular এর প্রতিটি বৈশিষ্ট্যের জন্য ডক্স যুক্ত করতে শুরু করে তবে কৌণিক ডক্স এবং ম্যাটেরিয়াল ডক্সের মধ্যে প্রচুর পরিমাণে অনুলিপি তৈরি হতে পারে যা শেষ পর্যন্ত সিঙ্কের বাইরে চলে যায়। তবে আমি এটিতে আমার মাথা আঁচড়ানোর জন্য বেশ ভাল সময় ব্যয় করেছি। আপনি সর্বদা উপাদান গিথুব রেপোতে

— এরিক Ihli

এটা কোন বাহানা আইএমএইচও। তারা এ সম্পর্কে কিছু করতে পারে, সম্ভবত এমন একটি "সাধারণ সমস্যা সমাধান" যা কিছু ধরণের টিপসের সাথে লিঙ্ক করে। যদি তাদের গ্রন্থাগারটি অন্যান্য নেটিভ কৌণিক নির্ভরতার উপর নির্ভর করে তবে সেই ডিপগুলি হাইলাইট করা তাদের কাজও। বিশেষত এই ক্ষেত্রে, তাদের কাঠামো সর্বোপরি "মেটাল.াঙ্গুলার.আইও" তে রয়েছে।

— ভাদোরকোয়েস্ট

অথবা কেবলমাত্র একটি স্ট্যান্ডার্ড টুলিং যা আপনি যা ব্যবহার করছেন তার উপর ভিত্তি করে এই ধরণের মডিউলগুলি স্বয়ংক্রিয়ভাবে টান। ওয়েবপ্যাকের জন্য কোনও কাজের মতো মনে হচ্ছে?

— ferr

আপনি স্বতঃসম্পূর্ণ ডক্সে স্ট্যাকব্লিটজ-এর মধ্যে নজর রাখলে Reactive FormsModule ব্যবহারের প্রয়োজনীয়তা স্পষ্ট। আরও সাধারণভাবে, যে কোনও উপাদানটির স্ট্যাকব্লিটজ ডেমো-তে ইন-পেজ কোডের চেয়ে আরও বিশদ থাকবে ...

— ডেভিড হাদাদ

Answer 2

উদাহরণটি বোঝার চেষ্টা করে ভুলে যান। অন্যরা যেমন বলেছে এটি প্রায়শই অসম্পূর্ণ থাকে।

এর পরিবর্তে শুধু 'পপ-আউটের' আইকনে ক্লিক করুন এখানে বৃত্তাকার এবং আপনি একটি পাবেন সম্পূর্ণরূপে কাজ StackBlitz উদাহরণ ।

আপনি প্রয়োজনীয় মডিউলগুলি দ্রুত নিশ্চিত করতে পারেন:

এর কোনও উদাহরণ মন্তব্য করুন ReactiveFormsModule, এবং যথেষ্ট পরিমাণে ত্রুটিটি আপনি পাবেন:

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. 

Comments

ধন্যবাদ, আমাকে সঠিক দিকে নির্দেশ করেছেন এবং ভবিষ্যতে কোথায় দেখতে হবে তা জানুন!

— এম.এডমন্ডসন

Answer 3

9.1.4 সংস্করণ থেকে আপনাকে কেবল আমদানি করতে হবে ReactiveFormsModule

https://angular.io/guide/reactive-forms

Answer 4

আপনার টেম্পলেটে নিয়মিত ম্যাট ইনপুট যুক্ত করে শুরু করুন। আসুন ধরে নেওয়া যাক আপনি ইনপুটটির মান ট্র্যাক করতে Reactive FormsModule থেকে নিয়ন্ত্রণ নিয়ন্ত্রণ নির্দেশিকা ব্যবহার করছেন।

প্রতিক্রিয়াশীল ফর্মগুলি ফর্ম ইনপুটগুলির পরিচালনা করতে একটি মডেল-চালিত পদ্ধতির সরবরাহ করে যার মান সময়ের সাথে পরিবর্তিত হয়। এই গাইড আপনাকে কীভাবে একটি সাধারণ ফর্ম নিয়ন্ত্রণ তৈরি এবং আপডেট করতে হবে, একটি গ্রুপে একাধিক নিয়ন্ত্রণ ব্যবহারে অগ্রগতি করতে হবে, ফর্মের মানগুলি যাচাই করতে হবে এবং আরও উন্নত ফর্মগুলি প্রয়োগ করতে পারে।

import { FormsModule, ReactiveFormsModule } from "@angular/forms"; //this to use ngModule

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],