angular - 如何在 angular-material2 中创建自动完成功能？

Question

我正在尝试从 angular-material2 进行自动完成，但我在 Visual Studio Code 中收到以下错误:

No provider for NgControl

下面是我的代码:

myForm.component.html:

<form #form="ngForm" (ngSubmit)="getEditContactForm(form.value)" ngNativeValidate>

    <div fxLayout="column" fxLayoutGap="8px">

        <md-input-container> 
            <input mdInput placeholder="State" [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>
        <md-input-container class="example-full-width">
            <input mdInput ngModel name="country" placeholder="Χώρα" required>
        </md-input-container> 
    </div>
    <md-dialog-actions align="center" style="margin-top:50px;">
        <div fxLayout="row" fxLayoutGap="10px">
            <button md-button type="button" (click)="sidenavInside.close()">Cancel</button>
            <button md-raised-button color="primary">Save</button>
        </div>
    </md-dialog-actions>
</form>

myForm.component.ts:

import { Component, OnInit } from '@angular/core';
import {FormControl, FormsModule, FormGroup } from '@angular/forms';
import 'rxjs/add/operator/startWith';


@Component({
  selector: 'app-admin-contact-form',
  templateUrl: './admin-contact-form.component.html',
  styleUrls: ['./admin-contact-form.component.css'],
})
export class AdminContactFormComponent implements OnInit {

  inputValue: any;

  stateCtrl: FormControl;
  filteredStates: any;

  states = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
  ];


  constructor() {

    this.stateCtrl = new FormControl();
    this.filteredStates = this.stateCtrl.valueChanges
        .startWith(null)
        .map(name => this.filterStates(name));

  } 

  filterStates(val: string) {
    return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s))
               : this.states;
  }

  getEditContactForm(v){
    console.log(v);
  }

  ngOnInit() {
  }

}

谁能帮我找出这个错误是怎么来的？

谢谢。

Answer 1

当您使用model-driven 表单时，您必须在AppModule 中导入ReactiveFormsModule

 imports { ReactiveFormsModule } from '@angular/forms';

@NgModule({
     imports: [
         ReactiveFormsModule,
     ],
     ....
 })
 export class AppModule {


 }