example - formularios en angular 4

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

Question

Estoy tratando de usar el componente de autocomplete material angular en mi proyecto angular2. 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 no se encuentra la directiva formControl .

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

Cuál es el problema aquí?

Answer 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],

Answer 2

Mientras usa formControl , debe importar ReactiveFormsModule a su matriz de imports .

Ejemplo:

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

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

Answer 3

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 .

Puede confirmar rápidamente los módulos necesarios:

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''.