Question

FormControl在使用指令时遇到困难...

我正在尝试在我的输入字段中实现自动完成功能。我正在使用以下角度材料指南进行逐字复制并粘贴其打字稿和html进行测试：https://material.angular.io/components/autocomplete/overview。

我在HTML的FormControl上始终收到错误消息，内容为：“任何适用的指令或输入元素均未提供属性FormControl。检查信息：报告元素上未定义的属性，事件或结构化指令绑定。”

 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包含以下模块：

sudo docker run -d --privileged --restart=unless-stopped --net=host -v /etc/kubernetes:/etc/kubernetes -v /var/run:/var/run rancher/rancher-agent:v2.1.6 --server https://PUBLIC_IP --token 9wdfgr66fghgfhghfghfh45648w --ca-checksum a0dfgfgrty65757g4a452353a2328531690 --worker

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

1 个答案: