html - FormControl nu este furnizat de niciunul dintre directivele aplicabile

FormControl întâmpină dificultăți cu directivele...

Încerc să implementez o funcție de completare automată în câmpul meu de input. Folosesc următorul ghid angular-material până în punctul în care am copiat și lipit cuvânt cu cuvânt codul lor typescript și html pentru a-l testa: https://material.angular.io/components/autocomplete/overview.

Continuu să primesc o eroare la FormControl în HTML care spune: „Proprietatea FormControl nu este furnizată de niciun director aplicabil și nici de elementul de intrare. Informații de inspecție: Raportează proprietate, eveniment sau legături directivale structurale nedefinite pe elemente.”

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

Răspuns #1

Așa cum se menționează în documentație: „Pentru acest exemplu, asigură-te că imporți ReactiveFormsModule din @angular/forms în NgModule-ul tău”

Așadar, asigură-te că app.module conține modulul, de exemplu:

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