Невозможно связать с 'formControl', так как это не известное свойство 'input' - проблема автозаполнения материала Angular2

355

Я пытаюсь использовать компонент автозаполнения Angular Material в своем проекте Angular 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директива не найдена.

Невозможно привязать к formControl, так как это не известное свойство input

В чем здесь проблема?

Лахиру Чандима
источник
5
один комментарий к ответу Pengyy: при использовании formControlвы должны импортировать ReactiveFormsModuleв свой модуль , а не rootModule . На всякий случай, если вы используете FormControlв своих функциональных модулях.
король Джон
У меня похожий случай, и в моей функции есть импорт для ReactiveFormsModule. Единственная разница в том, что я хотел бы связать с «formControlName» вместо «formControl». Сообщение имеет такую ​​же структуру
Искрен Станиславов
Ответы здесь верны; но если кто-то все еще застрял (как я), и ошибка говорит formcontrol(в нижнем регистре), а не formControl- если вы запускаете шаблоны через html-загрузчик webpack, это поможет: stackoverflow.com/a/40626329/287568
Бен Бойл

Ответы:

758

При использовании formControlвы должны импортировать ReactiveFormsModuleв ваш importsмассив.

Пример:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}
Pengyy
источник
173
В самом деле, почему в документации по material.angular.io/components/autocomplete/overview нет такого большого количества времени, потраченного на это. Волшебные неизвестные зависимости везде с угловыми.
Vadorequest
4
@Vadorequest: Эти документы для материала. Если они начнут добавлять документы для каждой используемой им функции Angular, это может привести к большому дублированию между документами Angular и документами о материалах, которые в конечном итоге будут синхронизированы. Но я потратил много времени на то, чтобы почесать голову. Вы всегда можете отправить вопрос в
репозиторий
22
Это не оправдание ИМХО. Они могли бы что-то сделать, может быть, «общие проблемы», связанные с какими-то советами. Если их библиотека зависит от других собственных угловых зависимостей, их задачей также является выделение этих глубин. Особенно в этом случае, их структура находится на "material.angular.io" в конце концов.
Vadorequest
3
Или просто стандартный инструмент, который автоматически использует эти типы модулей в зависимости от того, что вы используете. Похоже, работа для веб-пакета?
Ferr
Необходимость использования ReactiveFormsModule очевидна, если вы посмотрите в Stackblitz в документах по автозаполнению. В целом, любой компонент будет иметь больше деталей в демонстрации Stackblitz, чем код на странице ...
Дэвид Хаддад
42

Забудьте попытки расшифровать пример .ts - как уже говорили другие, он часто неполон.

Вместо этого просто нажмите на значок «всплывающее», обведенное здесь, и вы получите полностью рабочий пример StackBlitz .

введите описание изображения здесь

Вы можете быстро подтвердить необходимые модули:

введите описание изображения здесь

Закомментируйте все случаи ReactiveFormsModule, и, конечно же, вы получите ошибку:

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. 
Simon_Weaver
источник
Спасибо, указал мне в правильном направлении и знаю, где искать в будущем!
m.edmondson
-1

Начните с добавления обычного matInput к вашему шаблону. Предположим, вы используете директиву formControl из ReactiveFormsModule для отслеживания значения ввода.

Реактивные формы обеспечивают управляемый моделями подход к обработке входных данных форм, значения которых меняются со временем. В этом руководстве показано, как создать и обновить простой элемент управления формы, перейти к использованию нескольких элементов управления в группе, проверить значения формы и реализовать более сложные формы.

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

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],
Карим Салих
источник