No se puede vincular a 'formControl' ya que no es una propiedad conocida de 'input' - Problema de autocompletar material de Angular2

355

Estoy tratando de usar el componente de autocompletar material angular en mi proyecto Angular 2. Agregué 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>

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

Recibo el siguiente error. Parece que la formControldirectiva no se está encontrando.

No se puede vincular a 'formControl' ya que no es una propiedad conocida de 'input'

Cuál es el problema aquí?

angular typescript angular-material2 angular-forms Lahiru Chandima
fuente
55
un comentario a la respuesta de Pengyy: durante el uso formControl, debe importar ReactiveFormsModulea su módulo , no rootModule . En caso de que lo use FormControlen sus módulos de funciones.
Rey John
Tengo un caso similar y tengo la importación de ReactiveFormsModule en mi función. La única diferencia es que me gustaría vincularme a 'formControlName' en lugar de 'formControl'. El mensaje tiene la misma estructura
Искрен Станиславов
Las respuestas aquí son correctas; pero si alguien todavía está atascado (como yo) y el error dice formcontrol(en minúsculas) en lugar de formControl- si está ejecutando plantillas a través de webpack html-loader, esto ayudará: stackoverflow.com/a/40626329/287568
Ben Boyle

Respuestas:

758

Durante el uso formControl, debe importar ReactiveFormsModulea su importsmatriz.

Ejemplo:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}
Pengyy
fuente
173
Realmente, ¿por qué no está esto en el documento en material.angular.io/components/autocomplete/overview tanto tiempo perdido para esto? Dependencias mágicas desconocidas en todas partes con angular.
Vadorequest
44
@Vadorequest: esos documentos son para material. Si comienzan a agregar documentos para cada característica de Angular que usan, podría terminar habiendo mucha duplicación entre los documentos de Angular y los documentos de Material que eventualmente se perderán de sincronización. Pero también pasé una buena cantidad de tiempo rascándome la cabeza con esto. Siempre puede enviar un problema al repositorio material de github: github.com/angular/material2/issues
Eric Ihli
22
Eso no es excusa en mi humilde opinión. Podrían hacer algo al respecto, tal vez una "solución de problemas generales" que se vincule con algún tipo de consejos. Si su biblioteca depende de otras dependencias angulares nativas, también es su tarea resaltar esos departamentos. Especialmente en este caso, su marco está en "material.angular.io" después de todo.
Vadorequest
3
O simplemente una herramienta estándar que incorpora automáticamente este tipo de módulos en función de lo que está utilizando. ¿Suena como un trabajo para webpack?
ferr
La necesidad de usar ReactiveFormsModule es clara si mira dentro de Stackblitz en los documentos de autocompletar. En términos más generales, cualquier componente tendrá más detalles en su demostración de Stackblitz que el código de la página ...
David Haddad
42

Olvídate de descifrar el ejemplo .ts, como otros han dicho, a menudo es incompleto.

En su lugar, simplemente haga clic en el ícono 'emergente' marcado aquí y obtendrá un ejemplo de StackBlitz completamente funcional .

ingrese la descripción de la imagen aquí

Puede confirmar rápidamente los módulos necesarios:

ingrese la descripción de la imagen aquí

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

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'.
Simon_Weaver
fuente
¡Gracias, me señaló en la dirección correcta y sé dónde mirar en el futuro!
m.edmondson
-1

Comience agregando un matInput regular a su plantilla. Supongamos que está utilizando la directiva formControl de ReactiveFormsModule para rastrear el valor de la entrada.

Los formularios reactivos proporcionan un enfoque basado en modelos para manejar entradas de formulario cuyos valores cambian con el tiempo. Esta guía le muestra cómo crear y actualizar un control de formulario simple, avanzar al uso de controles múltiples en un grupo, validar valores de 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],
Karim Salih
fuente