html - 任何适用的指令均未提供 FormControl

Question

FormControl 在处理指令时遇到困难...

我正在尝试在我的输入字段中实现自动完成功能。我正在使用以下 Angular Material 指南，我逐字复制并粘贴了他们的 typescript 和 html 来测试它:https://material.angular.io/components/autocomplete/overview .

我一直在 HTML 中的 FormControl 上收到错误消息:“属性 FormControl 不是由任何适用的指令或输入元素提供的。检查信息:报告元素上未定义的属性、事件或结构指令绑定(bind)。”

 HTML CODE:

 <form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [FormControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

 TS CODE:

 import {Component, OnInit} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';

 @Component({
   selector: 'mySelector',
   templateUrl: 'myTemplate.html',
   styleUrls: ['myCSS.css'],
 })
 export class myExportClass implements OnInit {
   myControl = new FormControl();
   options: string[] = ['One', 'Two', 'Three'];
   filteredOptions: Observable<string[]>;

   ngOnInit() {
     this.filteredOptions = this.myControl.valueChanges
       .pipe(
         startWith(''),
         map(value => this._filter(value))
       );
   }

   private _filter(value: string): string[] {
     const filterValue = value.toLowerCase();

     return this.options.filter(option => 
 option.toLowerCase().includes(filterValue));
   }
 }

Answer 1

如文档中所述:"For this example, be sure to import ReactiveFormsModule from @angular/forms into your NgModule"

因此请确保您的 app.module 包含模块，例如:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }