如何在angular-material2中创建自动填充?

时间:2017-05-07 19:42:38

标签: angular angular-material2

我正在尝试从angular-material2进行自动填充,但我在Visual Studio代码中收到以下错误:

  

没有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() {
  }

}

有人可以帮我找到我的错误吗?

感谢。

0 个答案:

没有答案