Tidak dapat mengikat ke 'formControl' karena ini bukan properti yang dikenal dari 'input' - Angular2 Material Autocomplete issues


355

Saya mencoba menggunakan komponen Autocomplete Angular Material dalam proyek Angular 2 saya. Saya menambahkan yang berikut ke templat saya.

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

Berikut ini adalah komponen saya.

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

Saya mendapatkan kesalahan berikut. Sepertinya formControlarahan tidak ditemukan.

Tidak dapat mengikat ke 'formControl' karena ini bukan properti 'input' yang dikenal

apa yang terjadi disini?


5
satu komentar untuk jawaban Pengyy: Saat menggunakan formControl, Anda harus mengimpor ReactiveFormsModuleke modul Anda , bukan rootModule . Untuk berjaga-jaga jika Anda menggunakan FormControlmodul fitur Anda.
Raja John

Saya memiliki kasus serupa dan memiliki impor untuk ReactiveFormsModule di fitur saya. Satu-satunya perbedaan adalah bahwa saya ingin mengikat 'formControlName' daripada 'formControl'. Pesan ini memiliki struktur yang sama
Искрен Станиславов

Jawabannya di sini benar; tetapi jika ada yang masih macet (seperti saya) dan kesalahan mengatakan formcontrol(huruf kecil) daripada formControl- jika Anda menjalankan template melalui webpack html-loader, ini akan membantu: stackoverflow.com/a/40626329/287568
Ben Boyle

Jawaban:


758

Saat menggunakan formControl, Anda harus mengimpor ReactiveFormsModuleke importsarray Anda .

Contoh:

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

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

173
Sungguh, mengapa ini tidak ada dalam dokumen di material.angular.io/components/autocomplete/overview begitu banyak waktu yang terbuang untuk ini. Ketergantungan tak dikenal yang ajaib di mana-mana dengan sudut.
Vadorequest

4
@Vadorequest: Dokumen itu untuk Materi. Jika mereka mulai menambahkan dokumen untuk setiap fitur Angular yang mereka gunakan, mungkin akan ada banyak duplikasi antara dokumen Angular dan dokumen Material yang akhirnya akan menyelaraskan sinkronisasi. Tapi aku menghabiskan banyak waktu menggaruk-garuk kepalaku juga. Anda selalu dapat mengirimkan masalah ke materi github repo: github.com/angular/material2/issues
Eric Ihli

22
Itu bukan alasan IMHO. Mereka dapat melakukan sesuatu tentang, mungkin "masalah umum" yang menghubungkan ke beberapa jenis tips. Jika pustaka mereka bergantung pada dependensi sudut asli lainnya, itu juga tugas mereka untuk menyorot deps tersebut. Terutama dalam kasus ini, kerangka kerja mereka adalah pada "material.angular.io" setelah semua.
Vadorequest

3
Atau hanya perkakas standar yang secara otomatis menarik jenis modul ini berdasarkan apa yang Anda gunakan. Kedengarannya seperti pekerjaan untuk webpack?
fer

Kebutuhan untuk menggunakan ReactiveFormsModule jelas jika Anda mencari di dalam Stackblitz dalam dokumen autocomplete. Secara lebih umum, komponen apa pun akan memiliki lebih banyak detail dalam demo Stackblitz daripada kode dalam-halaman ...
David Haddad

42

Lupakan mencoba menguraikan contoh .ts - seperti yang dikatakan orang lain seringkali tidak lengkap.

Alih-alih, klik ikon 'pop-out' yang dilingkari di sini dan Anda akan mendapatkan contoh StackBlitz yang berfungsi penuh .

masukkan deskripsi gambar di sini

Anda dapat dengan cepat mengkonfirmasi modul yang diperlukan:

masukkan deskripsi gambar di sini

Komentari setiap kejadian ReactiveFormsModule, dan cukup yakin Anda akan mendapatkan kesalahan:

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

Terima kasih, mengarahkan saya ke arah yang benar dan tahu ke mana harus mencari di masa depan!
m.edmondson


-1

Mulailah dengan menambahkan matInput biasa ke templat Anda. Mari kita asumsikan Anda menggunakan direktif formControl dari ReactiveFormsModule untuk melacak nilai input.

Formulir reaktif menyediakan pendekatan berbasis model untuk menangani input formulir yang nilainya berubah seiring waktu. Panduan ini menunjukkan kepada Anda cara membuat dan memperbarui kontrol formulir sederhana, maju menggunakan beberapa kontrol dalam grup, memvalidasi nilai formulir, dan menerapkan formulir lebih lanjut.

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

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.