No se puede enlazar con 'formControl' ya que no es una propiedad conocida de 'input' - angular2 material Autocomplete issue

Estoy intentando utilizar el componente autocomplete de angular material en mi proyecto de angular2. He añadido lo siguiente a mi plantilla.

<md-input-container>
    <input mdInput placeholder="Category" [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>

Lo siguiente es mi componente.

import {Component, OnInit} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {FormControl} from "@angular/forms";

@Component({
    templateUrl: './edit_item.component.html',
    styleUrls: ['./edit_item.component.scss']
})
export class EditItemComponent implements OnInit {
    stateCtrl: FormControl;
    states = [....some data....];

    constructor(private route: ActivatedRoute, private router: Router) {
        this.stateCtrl = new FormControl();
        this.filteredStates = this.stateCtrl.valueChanges.startWith(null).map(name => this.filterStates(name));
    }
    ngOnInit(): void {
    }
    filterStates(val: string) {
        return val ? this.states.filter((s) => new RegExp(val, 'gi').test(s)) : this.states;
    }
}

Estoy recibiendo el siguiente error. Parece que no se encuentra la directiva formControl.

No se puede enlazar a "formControl" porque no es una propiedad conocida de "input";

¿Cuál es el problema aquí?

Kamil Naja
Pregunta editada 20º febrero 2019 в 3:49
Programación
angular typescript angular-material2 angular-forms
5º abril 2017 в 1:32
6 vistas
Solución

Al usar formControl, tienes que importar ReactiveFormsModule a tu matriz imports.

Ejemplo:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}
Alexander Abakumov
Respuesta editada 27º agosto 2018 в 2:06
Comentarios (5)

Olvídese de intentar descifrar el ejemplo .ts - como otros han dicho, suele estar incompleto.

En su lugar, simplemente haga clic en el icono 'pop-out' rodeado aquí y obtendrá un ejemplo de StackBlitz completamente funcional.

[]

Puede confirmar rápidamente los módulos necesarios:

[]

Comente cualquier instancia de ReactiveFormsModule, y seguro que obtendrá el error:

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'.
Simon_Weaver
Respuesta editada 2º marzo 2019 в 10:12
Comentarios (1)

Comienza añadiendo un matInput normal a tu plantilla. Supongamos que está utilizando la directiva formControl de ReactiveFormsModule para seguir el valor de la entrada.

Los formularios reactivos proporcionan un enfoque orientado al modelo para manejar las entradas del formulario cuyos valores cambian con el tiempo. Esta guía muestra cómo crear y actualizar un control de formulario simple, progresar hasta utilizar múltiples controles en un grupo, validar los valores del formulario e implementar formularios más avanzados.

import { FormsModule, ReactiveFormsModule } from "@angular/forms"; //this to use ngModule

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],
Comentarios (0)