Không thể liên kết với 'formControl' vì nó không phải là tài sản được biết đến của 'đầu vào' - tài liệu góc 2 Tự động hoàn thành

Question

Tôi đang cố gắng sử dụng vật liệu góc autocomplete thành phần trong dự án angular2 của tôi. Tôi đã thêm vào sau mẫu của tôi.

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

Sau đây là thành phần của tôi.

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

Tôi nhận được lỗi sau. Có vẻ như chỉ thị formControl không được tìm thấy.

Không thể liên kết với 'formControl' vì nó không phải là một tài sản của 'đầu vào'

vấn đề ở đây là gì được biết đến?

Answer 1

Trong khi sử dụng formControl, bạn phải nhập ReactiveFormsModule vào số imports array của mình.

dụ:

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

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

Answer 2

Quên cố gắng để giải mã .ts dụ - như những người khác đã nói thường là không đầy đủ.

Thay vào đó chỉ cần nhấp vào biểu tượng 'pop-out' vòng ở đây và bạn sẽ nhận được một fully working example.

Và tất nhiên bạn có thể thấy điều này bao gồm các mô-đun yêu cầu bổ sung (nếu không nó sẽ không hoạt động).

Just for fun Tôi nhận xét ra bất kỳ trường hợp của ReactiveFormsModule và chắc chắn đủ lên popped lỗi này:

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