Bilinen bir 'input' özelliği olmadığı için 'formControl' öğesine bağlanamıyor - angular2 malzeme Otomatik Tamamlama sorunu

Angular2 projemde angular material autocomplete bileşenini kullanmaya çalışıyorum. Şablonuma aşağıdakileri ekledim.

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

Aşağıdaki benim bileşenim.

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

Aşağıdaki hatayı alıyorum. Görünüşe göre formControl yönergesi bulunamıyor.

gt; 'input'un bilinen bir özelliği olmadığından 'formControl'e bağlanamaz;

Buradaki sorun nedir?

Kamil Naja
Edited question 2019ösp49ös15 Şubat 2019 в 3:49
Programlama
angular typescript angular-material2 angular-forms
2017ööp32öö1 Nisan 2017 в 1:32
6 görünümler
Çözüm

FormControlkullanırkenimportsdizinizeReactiveFormsModule` import etmeniz gerekmektedir.

Örnek:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}
Alexander Abakumov
Edited answer 2018ösp6ös14 Ağustos 2018 в 2:06
Yorumlar (5)

Örnek .ts'yi deşifre etmeye çalışmayı unutun - diğerlerinin de söylediği gibi genellikle eksiktir.

Bunun yerine burada daire içine alınmış 'pop-out' simgesine tıkladığınızda tamamen çalışan bir StackBlitz örneği elde edeceksiniz.

Gerekli modülleri hızlı bir şekilde onaylayabilirsiniz:

Herhangi bir ReactiveFormsModule örneğini yorumlayın ve hatayı alacağınızdan emin olun:

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'.
Simon_Weaver
Edited answer 2019ösp12ös22 Mart 2019 в 10:12
Yorumlar (1)

Şablonunuza normal bir matInput ekleyerek başlayın. Girdinin değerini izlemek için ReactiveFormsModule'daki formControl yönergesini kullandığınızı varsayalım.

Reaktif formlar, değerleri zaman içinde değişen form girdilerini işlemek için model odaklı bir yaklaşım sağlar. Bu kılavuzda basit bir form kontrolünün nasıl oluşturulacağı ve güncelleneceği, bir grupta birden fazla kontrolün nasıl kullanılacağı, form değerlerinin nasıl doğrulanacağı ve daha gelişmiş formların nasıl uygulanacağı gösterilmektedir.

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

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],
Yorumlar (0)