यह 'इनपुट' की ज्ञात संपत्ति नहीं होने के कारण 'फॉर्मकंट्रोल' से बंध नहीं सकता - Angular2 Material Autocomplete इशू

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

पेंगी के जवाब पर एक टिप्पणी: उपयोग करते समय formControl, आपको ReactiveFormsModuleअपने मॉड्यूल को आयात करना होगा , रूटमॉडल को नहीं । बस अगर आप FormControlअपने फीचर मॉड्यूल में उपयोग करते हैं।

— राजा जॉन

मेरे पास समान मामला है और मेरे फीचर में ReactiveFormsModule का आयात है। फर्क सिर्फ इतना है कि मैं 'formControlName' के बजाय 'formControlName' को बांधना चाहूंगा। संदेश में एक ही संरचना है

— Искрен Станиславов

यहाँ उत्तर सही हैं; लेकिन अगर कोई अभी भी अटका हुआ है (जैसे मैं) और त्रुटि के formcontrolबजाय (कम) कहता है formControl- यदि आप वेबपैक html- लोडर के माध्यम से टेम्पलेट चला रहे हैं, तो इससे मदद मिलेगी: 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

वास्तव में, यह क्यों नहीं है। इस सामग्री में doc.angular.io/compenders/autocomplete/overview इतना समय इसके लिए व्यर्थ है। कोणीय के साथ हर जगह जादुई अज्ञात निर्भरता।

— वडकोरक्वेस्ट

@Vadorequest: वे डॉक्स मटेरियल के लिए हैं। यदि वे अपने द्वारा उपयोग किए जाने वाले कोणीय की प्रत्येक सुविधा के लिए डॉक्स जोड़ना शुरू करते हैं, तो अंत में कोणीय डॉक्स और सामग्री डॉक्स के बीच बहुत अधिक दोहराव हो सकता है जो अंततः सिंक से बाहर निकल जाएगा। लेकिन मैंने इस पर अपना सिर खुजाने में भी अच्छा समय लगाया। आप हमेशा सामग्री के लिए एक मुद्दे को प्रस्तुत कर सकते हैं github repo: github.com/angular/material2/issues

— Eric Ihli

वह कोई बहाना नहीं IMHO है। वे कुछ के बारे में कुछ कर सकते हैं, शायद "सामान्य समस्या निवारण" जो किसी प्रकार की युक्तियों से जुड़ते हैं। यदि उनका पुस्तकालय अन्य मूल कोणीय निर्भरता पर निर्भर करता है, तो यह उन डिपो को उजागर करना भी उनका कार्य है। विशेष रूप से इस मामले में, उनकी रूपरेखा सभी के बाद "material.angular.io" पर है।

— वडकोरक्वेस्ट

या बस एक मानक टूलिंग जो आपके द्वारा उपयोग किए जा रहे हैं के आधार पर इन प्रकार के मॉड्यूल में स्वचालित रूप से खींचती है। वेबपैक के लिए एक नौकरी की तरह लगता है?

— फेर

यदि आप स्वत: पूर्ण डॉक्स में स्टैकब्लिट्ज़ के भीतर देखते हैं, तो ReactiveFormsModule का उपयोग करने की आवश्यकता स्पष्ट है। आम तौर पर, किसी भी घटक के इन-पेज कोड की तुलना में उसके स्टैकब्लिट्ज़ डेमो में अधिक विवरण होगा ...

— डेविड हदाद

Answer 2

उदाहरण .ts को समझने की कोशिश करना भूल जाते हैं - जैसा कि दूसरों ने कहा है कि यह अक्सर अधूरा है।

इसके बजाय बस यहां 'पॉप-आउट' आइकन पर क्लिक करें और आपको पूरी तरह से काम करने वाला StackBlitz उदाहरण मिलेगा ।

आप आवश्यक मॉड्यूल की जल्दी पुष्टि कर सकते हैं:

किसी भी उदाहरण पर टिप्पणी ReactiveFormsModuleकरें, और सुनिश्चित करें कि आपको त्रुटि मिलेगी:

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

Comments

धन्यवाद, मुझे सही दिशा में इंगित किया गया और पता है कि भविष्य में कहां देखना है!

— m.edmondson

Answer 3

संस्करण 9.1.4 से आपको केवल आयात करने की आवश्यकता है ReactiveFormsModule

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

Answer 4

अपने टेम्प्लेट में एक नियमित matInput जोड़कर शुरू करें। मान लेते हैं कि आप इनपुट के मान को ट्रैक करने के लिए ReactiveFormsModule से फॉर्मकंट्रोल निर्देश का उपयोग कर रहे हैं।

प्रतिक्रियाशील रूप उन इनपुट इनपुट को संभालने के लिए एक मॉडल-संचालित दृष्टिकोण प्रदान करते हैं जिनके मूल्य समय के साथ बदलते हैं। यह मार्गदर्शिका आपको दिखाती है कि एक साधारण फ़ॉर्म नियंत्रण कैसे बनाएं और अपडेट करें, एक समूह में कई नियंत्रणों का उपयोग करने के लिए प्रगति करें, प्रपत्र मानों को मान्य करें और अन्य उन्नत रूपों को लागू करें।

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

...

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