Я пытаюсь использовать компонент автозаполнения 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
В чем здесь проблема?
angular
typescript
angular-material2
angular-forms
Лахиру Чандима
источник
источник
formControl
вы должны импортироватьReactiveFormsModule
в свой модуль , а не rootModule . На всякий случай, если вы используетеFormControl
в своих функциональных модулях.formcontrol
(в нижнем регистре), а неformControl
- если вы запускаете шаблоны через html-загрузчик webpack, это поможет: stackoverflow.com/a/40626329/287568Ответы:
При использовании
formControl
вы должны импортироватьReactiveFormsModule
в вашimports
массив.Пример:
источник
Забудьте попытки расшифровать пример .ts - как уже говорили другие, он часто неполон.
Вместо этого просто нажмите на значок «всплывающее», обведенное здесь, и вы получите полностью рабочий пример StackBlitz .
Вы можете быстро подтвердить необходимые модули:
Закомментируйте все случаи
ReactiveFormsModule
, и, конечно же, вы получите ошибку:источник
С версии 9.1.4 вам нужно только импортировать
ReactiveFormsModule
https://angular.io/guide/reactive-forms
источник
Начните с добавления обычного matInput к вашему шаблону. Предположим, вы используете директиву formControl из ReactiveFormsModule для отслеживания значения ввода.
Реактивные формы обеспечивают управляемый моделями подход к обработке входных данных форм, значения которых меняются со временем. В этом руководстве показано, как создать и обновить простой элемент управления формы, перейти к использованию нескольких элементов управления в группе, проверить значения формы и реализовать более сложные формы.
...
источник